Articles by CSS Tricks from May 2017

I think, as front-end developers, we're well aware that different browsers (and versions) support different things. We make choices based on web features we'd like to use balanced with what statistics...

I think, as front-end developers, we're well aware that different browsers (and versions) support different things. We make choices based on web features we'd like to use balanced with what statistics...

In my previous article, which shall now retroactively be known as Managing State in CSS with Reusable JavaScript Functions - Part 1, we created a powerful reusable function which allows us to quickly ...

Last month Chris Coyier wrote a post investigating the question, "When Does a Project Need React?" In other words, when do the benefits of using React (acting as a stand-in for data-driven web framewo...

Making a full page background video is slightly trickier than a full page background image. Over on the Media Temple blog, I take a look at how that's done, but then also what the design patterns are ...

This last week at Google I/O, Addy Osmani announced some amazing developer resources for creating Progressive Web Applications (PWAs) that prioritize performance with JavaScript Frameworks. This is a ...

This article by Mark Dalgleish will go down as one of the most important front-end development articles of 2017.It's about the hot topic that is "CSS in JavaScript". Mark walks us through how that's a...

There are many ways to make icons for a website. Inline SVG is scalable, easy to modify with CSS, and can even be animated. If you're interested in learning more about the merits of using inline SVG, ...

I was asked to do a little session on this the other day. I'd say I'm underqualified to answer the question, as is any single person. If you really needed hard answers to this question, you'd probably...

If you keep up with the jargon within the web development and design industry it's likely that at some point you will have come across the term "duck" at least once or twice. Apart from it being fun t...

We're not going to be looking at CSS in this post but we are going to talk about tricks for taking paid vacations when no one is paying you to take time off. I suspect that there are a number of us in...

Last week's ShopTalk Show was all about HTML Email. It's such a fascinating subject, as technically it is front-end web development, but it almost feels like a bizarro alternate universe. We have doze...

React provides two standard ways to grab values from <form> elements. The first method is to implement what are called controlled components (see my blog post on the topic) and the second is t...

Exactly as I did the other week, Laurie Voss saw a tweet about the complication of front-end development and responded.From the outside, front end development in 2017 looks pathologically overcomplica...

Let's say we wanted to have something like this:Clockwise circular (cyclic) distribution with partially overlapping items.At first, this doesn't seem too complicated. We start with 12 numbered items:-...

Let's talk about state. Communicating state to the user that is, not application stores state in JavaScript objects, or localStorage. We're going to be talking about how to let our users know about st...

Manton Reece and Brent Simmons have just published their thoughts on JSON Feed which is a new standard for making a feed, like a collection of blog posts. The format itself is similar to RSS and Atom ...

I find Media Temple to be a perfect fit for a mostly-front-end person like me. I'm not an idiot, I'm pretty experienced with web work, but I don't really wanna be in charge of setting up and configuri...

Its been far too long since we rounded up some of the most interesting websites out there. But this time we have a diverse round-up of whacky interfaces and beautiful layouts to look at. Let's dive st...

There is no such thing as one-size-fits-all styling. An image gallery with three images might need to be styled differently than an image gallery with twelve. There are some cool tricks that you can u...

I know there are a ton of pure CSS cube tutorials out there. I've done a few myself. But for mid-2017, when CSS Custom Properties are supported in all major desktop browsers, they all feel... outdated...

I bet you have a style that you write CSS in, for the most part. You like 4-spaces, say. You always have a space after braces and colons. You always put a space after rulesets. You only ever put one d...

Webpack is so hot right now! Webpack is great when it comes to module bundling and working with frameworks like Vue or React, but it is a bit more awkward when handling static assets (like CSS). You m...

I am a huge fan of Sublime text editor and whenever I go and try other text editors I come back to Sublime crying: "Forgive me I'll never, ever, leave you again!" But I'm not here to praise Sublime. I...

A little while back, Nicolas Bevacqua wrote the fantastic article Making a Simple Site Work Offline with ServiceWorker. We kinda tag teamed the idea. Nicolas did all the work, but I put forth the idea...

Nice find by Ian Devlin:The :focus-within pseudo class becomes active when an element itself has focus or if any of its descendants does.Selecting a parent element based on children is lonnng awaited....

Late last year the team at the Financial Times launched a redesign that focused specifically on web performance and improving the user experience. And so in a post detailing their findings, James Webb...

CSS has Custom Properties now. We've written about them a bunch lately. Browser support is good, but of course, old non-evergreen browsers like Internet Explorer don't have them and never will. I can ...

Designing web forms can be tough all by itself. There is a lot of markup to get right to make sure it's accessible and has good UX. There is a lot of CSS (properties you may not use every day) to wres...

Chen Hui Jing has written an excellent post on the history of CSS fonts and the way that the W3C writes the specification and strange CSS properties like font-effect, font-emphasize and font-presenta...

CSS Custom Properties (perhaps more easily understood as CSS variables) provide us ways to make code more concise, as well as introduce new ways to work with CSS that were not possible before. They ca...

We kicked a poll off three months ago asking y'all what kind of local development environment you set up for running WordPress locally. At the time of this writing, we got 2,623 votes, so a decent amo...

Stuart Frisby documents that you shouldn't use the font shorthand when using a System Font Stack:...don't use -apple-system at the head of a shorthand font declaration, and test thoroughly, especially...

It started with seeing a recent Pen of Mandy Michael's text effects demos. I'm a very visual creature, so the first thing I noticed was the effect, not the title (which clearly states how the effect w...

Linear gradients are easy to create in CSS and are extremely useful. As we'll go through in this article, we can make them visually much smoother by creating them with non-linear gradients. Well, non-...

A month ago I explored the importance of relying on Interaction Media Features to identify the user's ability to hover over elements or to detect the accuracy of their pointing device, meaning a fine ...

Another one from Jake Archibald!This one is using two @font-face sets for the same font-family name. The second overrides the first, but only select characters of it, thanks to unicode-range. You know...

As Jake Archibald says, they are starting to land! The support landscape is already:Safari 10.1.Chrome Canary 60 behind the Experimental Web Platform flag in chrome:flags.Firefox 54 behind the dom.m...

If you put an Embedded Pen into a resizeable container, it will fluidly resize to fill both the vertical and horizontal space. Nothing overly incredible, but I link it up here because I think the whol...

This little Twitter exchange has stuck in my mind quite a bit. 1997: Lets make a website!*fires up vi*2007: Lets make a website!*downloads jQuery**fires up vi*2017: Lets make a website!😵 pic.t...

Nunjucks calls itself "A rich and powerful templating language for JavaScript", which sounds about right. It's not intentionally super lightweight like Mustache or the slightly more robust (but still ...

I was trying to think of the name of a thing in the CSS vernacular the other day. It made me think we should have some kind of reference right here on CSS-Tricks, as a site with CSS in the title proba...

Whenever we send or retrieve information with JavaScript, we initiate a thing known as an Ajax call. Ajax is a technique to send and retrieve information behind the scenes without needing to refresh t...

Last month, Heather Migliorisi looked at the accessibility of Smooth Scrolling. In order to do smooth scrolling, you:Check if the clicked link is #jump linkStop the browser default behavior of jumping...

Ordered lists are among the oldest and most semantically rich elements in HTML. Anytime you need to communicate sequence or ranking, the <ol> tag is there to help. The default appearance of th...

We posted not long ago about the difference between native CSS variables (custom properties) and preprocessor variables. There are a few esoteric things preprocessor variables can do that native varia...