Articles by CSS Tricks from February 2022

A fun deep dive from Zach. Do you have an opinion on which you should use?1) https://website.com/foo/2) https://websites.com/fooThe first option has a “trailing slash.” The second does not...

In my recent article about CSS underline bugs in Chrome, I discussed text-decoration-thickness and text-underline-offset, two relatively new and widely-supported CSS properties that give us more contr...

If you’re looking for a primer on CSS specificity, we’ve got that. And if you’re trying to get ahead of the game, you should be aware of CSS Cascade Layers as well.One of the ways to...

 Nic Chan:[…] the will-change property landed in major browsers in August 2015, and I’ve been on the lookout for when to use it ever since. It might seem self-evident to app...

For the past few weeks, Ive been hiring for a senior full-stack JavaScript engineer at my rental furniture company, Pabio. Since were a remote team, we conduct our interviews on Zoom, and Ive observed...

(This is a sponsored post.)In recent years, the Jamstack methodology for building websites has become increasingly popular. Performance, scalable, and secure, its easy to see why its becoming an attra...

Kinda silly sounding, isn’t it? CSS database queries. But, hey, CSS is capable of talking to other languages in the sense that it can set the values of things that they can read. Plus, CSS can r...

Lets face it: building an AA or AAA-accessible product can be quite daunting. Luckily, having an accessible product isnt all-or-nothing. Even seemingly small improvements can have nice quality of life...

That’s a damn one-two punch from Dave. He goes for the ultimate clickbait title, then follows up with a pile of epic advice for us all. If you want web browsers to get better, listen up:Complain...

On several occasions, Ive needed to send off an HTTP request with some data to log when a user does something like navigate to a different page or submit a form. Consider this contrived example of sen...

This is your complete guide to CSS cascade layers, a CSS feature that allows us to define explicit contained layers of specificity, so that we have full control over which styles take priority in a pr...

Being able to understand Node continues to be an important skill if youre a front-end developer. Deno has arrived as another way to run JavaScript outside the browser, but the huge ecosystem of tools ...

I linked to Jay’s front-end predictions last year and I think they panned out pretty well. I think he’s got a bit of a knack for that wide-scope look at front-end, including tooling and ar...

Font Awesome is an incredibly popular icon library. Unfortunately, its somewhat easy to use in a way that results in less-than-ideal performance. By subsetting Font Awesome, we can remove any unused g...

(This is a sponsored post.)First things first, if you didn’t know Netlify had a CLI, they do.  One of my favorite things about it running the command netlify dev on nearly any static-s...

A useful little UI widget thingy here from Jens Kuerschner. Click the add-to-calendar button, get a list of calendar apps, the user selects which one they actually use, and they get what they need for...

Within Drupal 10 core, were implementing a new auto-filling CSS Grid technique that I think is cool enough to share with the world.The requirements are:The user specifies a maximum number of columns. ...

Greensock made the GSAP Flip plugin free in the 3.9 release. FLIP is an animation concept that helps make super performance state-change animations. Ryan Mulligan has a good blog post: FLIP, coined by...

Creating CSS link hover effects can add a bit of flair to an otherwise bland webpage. If youve ever found yourself stumped trying to make a slick hover effect, then I have six CSS effects for you to t...

(This is a sponsored post.)✋ High fives to WordPress for releasing version 5.9 on January 29! This was the long-awaited introduction of the Site Editor and the reverberations are still being fe...

Last year, Elise Blanchard did some great historical research and discovered that blue hyperlinks replaced black hyperlinks in 1993. They’ve been blue for so long now that the general advice I a...

The File System Access API is a web API that allows read and write access to a user’s local files. It unlocks new capabilities to build powerful web applications, such as text editors or IDEs, i...

Kilian Valkhof:[…] Mobile Safari increases the default font-size when you switch a website from portrait to landscape. On phones that is, it doesnt do it on iPad. Safari has been doing this for ...

Every now and then, I find that Ive accumulated a bunch of links about various things I find interesting. Like React and JavaScript! Heres a list of nine links to other articles about them that Ive be...

Imagine you have an element with a multi-value CSS property, such as transform: optional custom property values:.el { transform: translate(100px) scale(1.5) skew(5deg);}Now imagine you dont always wa...

I was just writing in my “What’s new in since CSS3?” article about recent and possible future changes to CSS colors. It’s weirdly a lot. There are just as many or more new and ...

This is a wonderful roundup from Jeremy, who I picture circling January 1, 2022, in red marker on a giant paper calendar back in 2008 and patiently counting the days.See, there was a little smattering...

I recently rewrote one of my projects Minimal Theme for Twitter as a Next.js Chrome extension because I wanted to use React for the pop-up. Using React would allow me to clearly separate my extensio...

(This is a sponsored post.)Cloudinary is a host for your digital assets like images and video. If you don’t already know them, you should, because you can build it into the asset management you ...

Say you have a bitmap graphic like a JPG, PNG, or GIF and you wish it was vector, like SVG. What do you do? You could trace it yourself in some kind of design software. Or tools within …SVGcod...

I was updating my portfolio and wanted to use the forward slash (/) as a visual element for the sites main layout. I hadn’t attempted to create a slanted container in CSS before, but it seemed l...

There is a code snippet that I see all the time when the media query prefers-reduced-motion is talked about. Here it is:@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !im...

You know how there are JavaScript dialogs for alerting, confirming, and prompting user actions? Say you want to replace JavaScript dialogs with the new HTML dialog element.Let me explain.I recently wo...

(This is a sponsored post.)Hey! Scheduled Functions are cool! Think of them like a CRON job. I want this code to run every Monday at 2pm. I want this code run every hour on the hour. That kind …...

A little gradient generator tool from Tom Quinonero. You’d think fading one color to another would be an obvious, simple, solved problem it’s actually anything but!Tom’s generator d...

Virtual conferences have changed the game in terms of how a presenter is able to deliver content to an audience. At a live event its likely you just have your laptop, but at home, you may have multipl...

The relatively new WordPress editor, also known as the WordPress Block Editor, always under development via the Gutenberg plugin, has been with us since 2018. You can use the block editor on any WordP...

Pedro Santos suggests:Using naming conventions such that you can learn them once and apply them everywhereUnidirectional data flows. Make it easy to follow the app flow.No magic numbers. I’d add...

I interviewed Thierry Koblentz, creator of Atomic CSS, to understand the history and background that led to making of the popular CSS framework. Thierry, now retired, has vast experience writing CSS a...

Here’s a super classy demo from Michelle Barker over on Codrops that shows how to build a scrollable and draggable timeline with GSAP. It’s an interesting challenge to have two different i...

The ability to identify users is vital for maintaining the security of any applications. Equally important is the code thats written to manage user identities, particularly when it comes to avoiding l...

Jim Nielsen’s mom couldn’t open a website. Jim worked on confirming the issue and documented how he got to the bottom of it:[…] well it cant be a browser issue. Its not like my Mom i...

I have a coworker who is smart, capable, and technologically-literate. Like me, they work on the web full-time.When they are sharing their screen in a meeting, I find myself disassociating fixating on...

Maggie Appleton gets into what is perhaps the foremost metaphor the web is founded on: paper. Paper documents were the original metaphor for the web. […]The page you’re reading this o...

Lemme do this one quick-hits style:Mary Lou published a quintessentially-Codrops-y demo called Alternate Column Scroll.The scrolling effect is powered by Locomotive Scroll, which we’ve coinciden...

Its 2022. And the current relevance of TypeScript is undisputed. TypeScript has dominated the front-end developer experience by many, many accounts. By now you likely already know that TypeScript is a...