MedicoNext

Passkeys: What the Heck and Why?

April 12, 2023

These things called passkeys sure are making the rounds these days. They were a main attraction at W3C TPAC 2022, gained support in Safari 16, are finding their way into macOS and iOS, and are slated to be the future for password managers like 1Password. They are already supported in Android, and will soon find their way into Chrome OS and Windows in […]

Read more ⟶

Some Cross-Browser DevTools Features You Might Not Know

March 22, 2023

I spend a lot of time in DevTools, and I’m sure you do too. Sometimes I even bounce between them, especially when I’m debugging cross-browser issues. DevTools is a lot like browsers themselves — not all of the features in one browser’s DevTools will be the same or supported in another browser’s DevTools. But there […]

Read more ⟶

Making Calendars With Accessibility and Internationalization in Mind

March 13, 2023

Doing a quick search here on CSS-Tricks shows just how many different ways there are to approach calendars. Some show how CSS Grid can create the layout efficiently. Some attempt to bring actual data into the mix. Some rely on a framework to help with state management. There are many considerations when building a calendar […]

Read more ⟶

5 Mistakes I Made When Starting My First React Project

March 10, 2023

You know what it’s like to pick up a new language or framework. Sometimes there’s great documentation to help you find your way through it. But even the best documentation doesn’t cover absolutely everything. And when you work with something that’s new, you’re bound to find a problem that doesn’t have a written solution. That’s […]

Read more ⟶

Creating a Clock with the New CSS sin() and cos() Trigonometry Functions

March 8, 2023

CSS trigonometry functions are here! Well, they are if you’re using the latest versions of Firefox and Safari, that is. Having this sort of mathematical power in CSS opens up a whole bunch of possibilities. In this tutorial, I thought we’d dip our toes in the water to get a feel for a couple of […]

Read more ⟶

Managing Fonts in WordPress Block Themes

March 6, 2023

Fonts are a defining characteristic of the design of any site. That includes WordPress themes, where it’s common for theme developers to integrate a service like Google Fonts into the WordPress Customizer settings for a “classic” PHP-based theme. That hasn’t quite been the case for WordPress block themes. While integrating Google Fonts into classic themes […]

Read more ⟶

Everything You Need to Know About the Gap After the List Marker

March 2, 2023

I was reading “Creative List Styling” on Google’s web.dev blog and noticed something odd in one of the code examples in the ::marker section of the article. The built-in list markers are bullets, ordinal numbers, and letters. The ::marker pseudo-element allows us to style these markers or replace them with a custom character or image. […]

Read more ⟶

An Approach to Lazy Loading Custom Elements

February 13, 2023

We’re fans of Custom Elements around here. Their design makes them particularly amenable to lazy loading, which can be a boon for performance. Inspired by a colleague’s experiments, I recently set about writing a simple auto-loader: Whenever a custom element appears in the DOM, we wanna load the corresponding implementation if it’s not available yet. […]

Read more ⟶

Different Ways to Get CSS Gradient Shadows

February 10, 2023

It’s a question I hear asked quite often: Is it possible to create shadows from gradients instead of solid colors? There is no specific CSS property that does this (believe me, I’ve looked) and any blog post you find about it is basically a lot of CSS tricks to approximate a gradient. We’ll actually cover […]

Read more ⟶

Healthcare, Selling Lemons, and the Price of Developer Experience

February 9, 2023

Every now and then, a one blog post is published and it spurs a reaction or response in others that are, in turn, published as blogs posts, and a theme starts to emerge. That’s what happened this past week and the theme developed around the cost of JavaScript frameworks — a cost that, in this […]

Read more ⟶

Moving Backgrounds

February 9, 2023

We often think of background images as texture or something that provides contrast for legible content — in other words, not really content. If it was content, you’d probably reach for an <img> anyway, accessibility and whatnot. But there are times when the position or scale of a background image might sit somewhere between the […]

Read more ⟶

The truth about CSS selector performance

February 7, 2023

Geez, leave it to Patrick Brosset to talk CSS performance in the most approachable and practical way possible. Not that CSS is always what’s gunking up the speed, or even the lowest hanging fruit when it comes to improving performance. But if you’re looking for gains on the CSS side of things, Patrick has a […]

Read more ⟶

The Double Emphasis Thing

February 6, 2023

I used to have this boss who loved, loved, loved, loved to emphasize words. This was way back before we used a WYSIWYG editors and I’d have to handcode that crap. (Let’s not go into the colors he used for even MOAR emphasis.) Writing all that markup never felt great. The effort it took, sure, […]

Read more ⟶

A Fancy Hover Effect For Your Avatar

February 3, 2023

Do you know that kind of effect where someone’s head is poking through a circle or hole? The famous Porky Pig animation where he waves goodbye while popping out of a series of red rings is the perfect example, and Kilian Valkhof actually re-created that here on CSS-Tricks a while back. I have a similar […]

Read more ⟶

Caching Data in SvelteKit

February 1, 2023

My previous post was a broad overview of SvelteKit where we saw what a great tool it is for web development. This post will fork off what we did there and dive into every developer’s favorite topic: caching. So, be sure to give my last post a read if you haven’t already. The code for […]

Read more ⟶

AR, VR, and a Model for 3D in HTML

January 27, 2023

Tucked down somewhere in the Safari Technology Preview 161 release notes is a seemingly innocous line about support for a new HTML element and attribute: Added support for <model src> and honor <source type> attributes (257518@main) Anytime I see mention of some element I don’t recognize, my mind goes straight to Huh! New to me, but probably old news […]

Read more ⟶

Animating CSS Grid (How To + Examples)

January 25, 2023

I’m pleased to shine a light on the fact that the CSS grid-template-rows and grid-template-columns properties are now animatable in all major web browsers! Well, CSS Grid has technically supported animations for a long time, as it’s baked right into the CSS Grid Layout Module Level 1 spec. But animating these grid properties only recently […]

Read more ⟶

Getting Started With SvelteKit

January 23, 2023

SvelteKit is the latest of what I’d call next-gen application frameworks. It, of course, scaffolds an application for you, with the file-based routing, deployment, and server-side rendering that Next has done forever. But SvelteKit also supports nested layouts, server mutations that sync up the data on your page, and some other niceties we’ll get into. […]

Read more ⟶

More Real-World Uses for :has()

January 20, 2023

The :has() pseudo-class is, hands-down, my favorite new CSS feature. I know it is for many of you as well, at least those of you who took the State of CSS survey. The ability to write selectors upside down gives us more superpowers I’d never thought possible. I say “more superpowers” because there have already […]

Read more ⟶

How to Transition to Manifest V3 for Chrome Extensions

January 19, 2023

While I am not a regular Chrome extension programmer, I have certainly coded enough extensions and have a wide enough web development portfolio to know my way around the task. However, just recently, I had a client reject one of my extensions as I received feedback that my extension was “outdated”. As I was scrambling […]

Read more ⟶