Monthly Archives: June 2018

Evan Minto:

The question was “How many users browse the main Internet Archive site with a default font size other than the common value of 16 pixels?” By knowing this, we would determine how many users would be affected by sizing with relative units like rems/ems.

Using the methodology I describe below, we found that the answer is 3.08% of our users.

So if you set type in pixels, and your traffic is anything like the Internet Archive’s, 3% of …

The post Users DO Change Font Size appeared first on CSS-Tricks.

From time to time at Stackoverflow, the question pops up whether there is an equivalent to the stroke-dashoffset technique for animating the SVG stroke that works for the fill attribute. But upon closer inspection, what the questions are really trying to ask is something like this:

I have something that is sort of a line, but because it has varying brush widths, in SVG it is defined as the fill of a path.

How can this “brush” be animated?

In …

The post Animate Calligraphy with SVG appeared first on CSS-Tricks.

Eric Bailey takes a hardline position on <input placeholder>.

You might be thinking, as I did: yeah, yeah I know the pitfalls. I’m capable of using placeholder responsibly. But when you look at all the negatives together:

• Can’t be automatically translated;
• Is oftentimes used in place of a label, locking out assistive technology;
• Can hide important information when content is entered;
• Can be too light-colored to be legible;
• Has limited styling options;
• May look like pre-filled information and be

…

The post Don’t Use The Placeholder Attribute appeared first on CSS-Tricks.

I first wrote this post four years ago. I put it on a blog that no longer exists. Funnily enough, I still refer to it myself, so I figured it might be best served in a place where other people can see it. I’ve made only a few minor tweaks to the original content. A lot about how I work has changed, but most of these pieces have not.

I work on many personal projects concurrently. I love doing this, …

The post Balancing Time appeared first on CSS-Tricks.

You might know Filestack from being an incredible service to add file uploading, storage, and management to your own web apps.

There is another thing Filestack can do for you: convert documents into different formats.

For one thing, it can manipulate documents. Take images. Perhaps you would like to offer some image manipulation for your users uploaded images, like cropping and rotation. That’s a common feature for apps that offer avatar uploading. With Filestack, you got it.

It’s great …

The post Advanced Document Conversions with Filestack appeared first on CSS-Tricks.

Yes, this is a React component, but regardless if you care about that part or not, the “ideal image component” part could be of interest. There is a lot to consider with how we put images on web pages these days. This deals with:

• Placeholder space (and then flexible responsive styles after loading)
• Low-quality placeholder images
• Responsive images syntax (srcset)
• Image formats (e.g. using WebP when you can)
• Click-to-load on bad network connections
• Better UX for loading errors,

…

The post An Almost Ideal React Image Component appeared first on CSS-Tricks.