Article Archives

Trusting SSL Locally on a Mac

I run most of my production sites with forced SSL, including CSS-Tricks. But locally, I've avoided getting SSL working properly. I've always avoided it, perhaps because it's not immediately obvious how to do it. It's also not that big of a deal since it's just local traffic. But hey, might as well make local work as close to production is possible eh?…

What the heck is the event loop anyway?

In 2014, Philip Roberts gave a great talk at JSConf EU, walking through the event loop and breaking down what JavaScript is doing under the hood for those of us without CS degrees. I came across this talk the other day in my Twitter stream, and really enjoyed it. Even though it's a couple years old, it has stood the test of time and remains a great resource.…

2 comments

How To Use WebPageTest and its API

While the richness and interactivity of the average website has changed dramatically over the last decade, the same can be said about the expectations of those who consume it. This page has a list of reports that show how businesses were able to establish a direct correlation between the their website's performance and conversion/revenue figures. For example, the engineering team at the Financial Times conducted a test which showed that an increase of just one second in load time caused …

14 comments

Websites We Like: August 2016

Here are some of the websites we’ve stumbled upon lately that have made us all collectively Oooo and Aaaah with delight. Sometimes we literally type "oooooo" into the Slack channel where we save and discuss these. It's a fairly new thing we've started doing. Enjoy!…

24 comments

`font-display` for the Masses

The following is a guest post by Jeremy Wagner, a web developer, author, and speaker living in the Twin Cities. He's got a new book on web performance. Here we're going to dig into a brand new CSS feature, that once it percolates through the browser ecosystem, will be great for performance.

If you're a regular reader here at CSS-Tricks, chances are good that you're familiar with using web fonts. You may even know a few useful tricks …

CSS “locks”

Tim Brown with a new (metaphorical) term to describe a value that can fluctuate between two set values:

In canal and river navigation, a lock is a device used for raising and lowering vessels between stretches of water that are at different levels. That’s exactly what our formula accomplishes. Our formula is a CSS calc “lock”.

To fluctuate between a 1.3em and 1.5em line-height depending on the screen width:

line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 21em)/(35 -
16 comments

A Case Study on Boosting Front-End Performance

The following is a guest post by Declan Rek, who works as a developer at De Voorhoede, a front end tech agency. A version of this article was originally published on their blog. Declan asked about republishing here, and as it is jam-packed with real world case study performance stuff, I was into it.

At De Voorhoede we try to boost front-end performance as much as possible for our clients. It is not so easy to convince every …

4 comments

Staggering Animations

The following is a guest post by David DeSandro. David wanted to offer a new feature in Isotope: staggered animations. Like so many things web, there are lots of ways he could have approached it. Here he looks at some of the possibilities, the advantages and disadvantages of each, and what he ultimately went with for Isotope.

32 comments

The Average Web Page (Data from Analyzing 8 Million Websites)

The following is a guest post by Catalin Rosu, who along with some colleagues, dug up a ton of data about the HTML content of web sites. This is the most recent study of its kind and wildly fascinating to see the results. I find it especially fun to compare the top results to what I would have guessed would have won.

We've all been there. We try to improve our HTML code making it clean, beautiful, and readable. …

10k Apart

This year is An Event Apart's 10th anniversary. In order to celebrate, they are putting on competition called 10K Apart where people show off what can be accomplished in 10kB of data. This isn't a new competetion- its first genesis has been a project called 5k way back in 2000-2002. This year is sponsored by Microsoft Edge and they're giving away $10K in prizes to competitors. The judge panel has top professionals from web development, talented people like Sara Soueidan

19 comments

What Goes Through My Head When Exploring a Site

I got an email from Brendan Foster the other day, a developer at the Australian agency The Competition. He was showing me an interesting CSS trick that helped him pull off a layout thing on a website he was helping work on for Margaret River Beverages. I actually thought the whole site was pretty interesting, and the idea occurred to me to jot down my thoughts as I explored the site. He was cool with it.…

10 comments

Get the Original Image from a Data URL

Someone wrote in asking how they might get the "original image" when all they had was the data URL version of the image. I'm not exactly sure how you get into that situation, but hey, I woke up in a trunk more than once.

You can absolutely get the original back, by exploiting the wonderful powers of the browser.…

22 comments

Force Selection of Text Block

Have you ever seen (or put yourself) some text into a <textarea></textarea> or <input />, not because it was part of a form, but because it made the whole block of text easier to select. Inputs like that have selection boundaries, meaning you can click into them and (for example) Select All and get just the text inside the input.

There is a CSS property that allows us to do that without needing to use a not-particularly-semantically-appropriate form …

30 comments

Zooming Background Images

The following is a guest post by Dylan Winn-Brown, who shows us a performant way to accomplish this design effect.

Whilst working on a client’s website recently, I was asked to replicate an effect like this.


Containers with background images which zoom within their container on hover, revealing more information.…
8 comments

Image Upload and Manipulation with React

The following is a guest post by Damon Bauer, who tackles a pretty common web developer job: offering user image uploads. I'd hesitate to call it easy, but with the help of some powerful tools that do a lot of the heavy lifting, this job has gotten a heck of a lot easier than it used to be. Damon even does it entirely in the browser!…

7 comments

Everything You Need to Know About Instagram API Integration

The following is a guest post by Emerson This. This is a guide for web developers interested in integrating Instagram content on websites. It was only a few months ago when Instagram changed what was possible with their API, so this serves to explain that, what is possible now, and examples of those possibilities.

Design Better Data Tables

Matthew Ström on how data tables can be better through things like alignment, rules, labels, backgrounds, and the type of numerals used:

Oldstyle figures look nice in sentences, where they better match the size and spacing of lower-case letters; lining figures are more uniform, and reinforce the grid-like structure of the table.…

8 comments

The Atomics

  • "Atomic" is a browser-based timeline animation tool.
  • "Atomic Design" is a design methodology in which you design very small parts and combine them in larger and larger pieces to build a whole.
  • "Atomic CSS" is a system in which you apply styles directly through designated HTML classes.
  • "Project Atomic" is something for running containerized applications, like Docker? I dunno it's DevOps-y and above my head.
  • "Atomic Web Browser" is an old (looks abandoned) iOS web browser.

None of them have …

Extensible Web Components

Some interesting thoughts from Jeremy Keith about his concerns with Web Components:

Compare Service Workers to web components.

First of all, ask the question “who benefits from this technology?” In the case of Service Workers, it’s the end users. They get faster websites that handle network failure better. In the case of web components, there are no direct end-user benefits. Web components exist to make developers lives easier. That’s absolutely fine, but any developer convenience gained by the use of …

16 comments

Organizing Your Grunt Tasks

The idea of breaking up your code into smaller bite sized chunks creates an environment that is easy to work in and maintain. That's often thought of as module design, and is a standard for web development these days. I'm going to show you a way you can use module design to better organize your Grunt tasks.…

SVG Uploads in WordPress (the Inconvenient Truth)

Bjørn Johansen covers why:

  1. It's easy to enable SVG uploads in WordPress (few lines to a functions.php file or functionality plugin)
  2. It makes sense why WordPress doesn't allow them by default.

Jake Archibald in the comments:

In hindsight there probably should have been two content types, one that treats SVG has a full document context, and the other as a simple image (how browsers treat SVG in today, which cannot execute script or initiate fetches).

Hear hear.

I also had …

13 comments

Precedence in CSS (When Order of CSS Matters)

On your average CSS-writin' day, odds are you won't even think about precedence in CSS. It doesn't come up a whole heck of a lot. But it does matter! It comes up any time multiple CSS selectors match and element with the exact same specificity.

Assuming specificity is exactly the same, order does matter.

Styles declared later win. …

18 comments

High Performance SVGs

I recently worked on a project that was getting a ton of traffic but users were bouncing because the page load was too long at around 10 seconds. They called me in because the majority of the images on that site were SVGs, and they were animated. I trained the team how to decrease the file size on the SVGs while preserving the appearance and functionality, finally getting the load time to under 2 seconds. The bounce rate …

CSS Writing Mode

Ahmad Shadeed with a bonafide CSS trick:

I noticed a CSS property called writing-mode, this was the first time that I know of it. After some research, I learned that its purpose is for vertical language scripts, like Chinese or Japanese. However, the interesting thing is that when using it with English, we can create a vertical text very easily.

Even in English, writing-mode: vertical-lr; help us lay out text vertically without a bunch of positioning, placeholding, and transforms.…

14 comments

The State of CSS Reflections

I recently saw this loader on CodePen, a pure CSS 3D rotating set of bars with a fading reflection. It's done by using an element for each bar, then duplicating each and every one of these elements to create the reflection and finally adding a gradient cover to create the fading effect. Which sounds a bit like scratching behind your right ear with the toes of your left foot! Not to mention the gradient cover method for the fading effect …

Sponsor: Wufoo

Wufoo is for building web forms. From a simple contact forms to complex, multi-page, logic-controlled mega forms.

Personally, I'm a huge Wufoo user. I have multiple accounts across different organizations. Each organization has multiple users with access to different forms and reports. I've used it for job applications, customer support, selling T-shirts, collecting feedback, lead generation, and more.

Wufoo has collected literally hundreds of thousands of form entries for me, saving me countless hours of dev work. Often those entries …

Web Design in 4 Minutes

Jeremy Thomas explains web design (the basic applying style to content part) through an interactive step-by-step walkthrough. I could see this being an ah-ha moment for plenty of folks in the early stages of understanding web design.…

one comment

Remote Control WordPress at Scale

This is the third and final article in a series on "remote control WordPress". That's my nickname for this strategy of managing network settings on one "control" install, and then pulling those values into all your client installs. The advantage is that it saves staff members from having to toggle the same settings on the same network plugins, across many multisite installs.…

New `video` Policies for iOS

This is pretty big news: earlier today the WebKit team announced that iOS 10 will now support silent <video> elements with the autoplay attribute, which is a big deal for performance. Jer Noble describes the update in much more detail:

It turns out that people these days really like GIFs. But the GIF format turns out to be a very expensive way to encode animated images when compared to a modern video codec like H.264. We’ve found that GIFs can …

34 comments

Full Width Containers in Limited Width Parents

I bookmarked a tweet a few months ago, as it was a bonafide CSS trick and that's what we love around here.

The issue is: how do we make a full-browser-width container when we're inside a limited-width parent?

Using the fieldset and legend elements

Leonie Watson:

You should use the <fieldset> and <legend> elements when:

  • You have a single multiple choice question (using radio buttons or checkboxes).
  • You have several questions relating to the same topic (like text boxes, or any other type of field).

You should not use the <fieldset> and <legend> when:

  • You have a single form field that asks for a single piece of information.
6 comments

Give Your Development Domain a Different Favicon Than Production

I got frustrated of not being able to tell the tabs apart as I was working on stuff. So this is my so-dumb-it's-smart solution.

The only hitch in my gittyup was that I had to add it to .gitignore, which untracked the file, which deletes it, and had to manually slip it back onto the server. Although it looks like there are smarter ways.…

8 comments

Learning to COPE with Microservices

I vividly remember my first encounter with a content management system: It was 2002 with a platform called PHP-Nuke. It offered a control panel where site administrators could publish new content that would be immediately available to readers, without the need to create/edit HTML files and upload them via FTP (which at the time was the only reality I knew).

Once I'd made the jump to a CMS, I didn't look back. CMSs quickly became part of my toolkit …

OAuth Fun with OAuth1

This is the second article in a three-part series about using the WP API to achieve something I'm calling "Remote Control WordPress", a lifestyle where you'd manage network settings on a "control" install, and have other "client" installs pull their settings from the control. The advantage of this is that you could then manage the settings for many WordPress installs all in one place. The first article laid out how to register network settings as a custom endpoint in the …

7 comments

CSS Keyframe Animation with Delay Between Iterations

Say you want an animation to run for 1 second, but then delay for 4 seconds before running again. Seems like that would be easy. Turns out it's not-so-straightforward, but doable. You need to fake it.…

55 comments

Considerations for Styling a Modal

A modal. A small box that pops up to tell you something important. How hard can it be? Wellllll. Medium hard, I'd say. There's quite a few considerations and a few tricky things to get just right. Let us count the ways.…

11 comments

Change Color of All Four Borders Even With `border-collapse: collapse;`

The following is a guest post by Daniel Jauch. It's a quicky that covers something I bet many of us have run across at one time or another: border-collapse is great, until it impedes on your ability to change a border color you're trying to change because of the overlapping.

The border-collapse property is great for making borders even all around <table></table> cells. It makes for a clean look that I actually prefer.

But, there is something that can …

A Comprehensive Guide to Font Loading Strategies

Squee!

The post we've been waiting for from Zach Leatherman. This will be the go-to reference when making tech and UX choices on font loading.

Zach compares 11 current (and future) techniques for loading web fonts, all with live demos. He clearly lists the PRO's and CON's for each without making it a novel. Most valuably, he provides a VERDICT on each, which let's you know if the technique is up-to-par or not.

A winner is declared, but it's fairly …

7 comments

The WP REST API for Remote Control WordPress

At my day job, we have about 1,000 sites spread across 30 WordPress multisite installs. The installs all run many of the same plugins and settings, especially at the network level. This causes a lot of wasted time for our staff: They have to manually repeat the same settings across 30 installs. Because of this, we're moving to something I like to call "Remote Control WordPress".…

How I Ended Up With Element Queries, And How You Can Use Them Today

We often want a component to respond to the dimensions of its parent element rather than the dimensions of the browser window. Currently that’s not possible but ultimately that’s the idea behind Element Queries, and over on Smashing Magazine Tommy Hodgins has written about the development of EQCSS.js, a JavaScript library which allows developers to write element queries.

This implementation of element queries is interesting as it suggests that we can style an element dependent on the features …

3 comments

Collaborative Engineering and Design Tools

Working at any large company, the greatest hurdle is always the problem of scale. Be it engineering, design, or how they work together, communication is the key to a successful business. Here are some of the tools that I've seen help a great deal while collaborating on a large team. With a number of engineers and designers in the mix — not to mention hybrids like me — working together seamlessly and staying focused on a common goal for …

35 comments

A Front End Developer is Aware

One idea that has lodged itself into my brain recently (largely from this panel discussion) is how a front end developer needs to be aware. In a general sense, the front end developer is positioned in the middle of lots of other jobs. Everybody involved in a web team ends up talking with the front end developers. That makes sense. The front end developers create the actual thing people interact with. Everything comes together with the front end …

​Sponsored: Stop Running Out Of Money

YNAB: You’ve Never Budgeted Like This Before

YNAB is different because it works. By combining a proven method with award-winning software, on average users save $200 the first month, and $3,300 by month nine. YNAB will teach you to think about your money differently and give you the tools to put it into practice. What have you got to lose? (Except all that debt and stress, so, sort of a lot, actually.)

Sign up for a 34-day free trial to …

12 comments

Accessible SVGs

Scalable Vector Graphic (SVG) is emerging as the preferred graphic format to use on the web today. Are you abandoning the icon font or replacing old pg, gif and png graphics for the well-supported SVG, too? Let’s see how this will impact users of assistive technology (AT) and what is needed in order to ensure a great user experience for everyone.…

We have a pretty good* newsletter.