Simple Interactive Pie Chart with CSS Variables and Houdini Magic

I got the idea for doing something of the kind when I stumbled across this interactive SVG pie chart. While the SVG code is as compact as it gets (a single <circle> element!), using strokes for creating pie chart slices is problematic as we run into rendering issues on Windows for Firefox and Edge. Plus, in 2018, we can accomplish a lot more with a lot less JavaScript!

AI got the following result down to a single HTML element …

The post Simple Interactive Pie Chart with CSS Variables and Houdini Magic appeared first on CSS-Tricks.

An Event Apart

Just the other day in a Slack group I hang out in someone asked “what web design events is everyone going to and loving?” An Event Apart is always my immediate answer. I’ve gotten to speak a number of An Event Apart events, which is an incredible honor and always a good time. So from that perspective, I love it. I can tell you that it’s the most well-run conference I go to that gets all the details right.

But …

The post An Event Apart appeared first on CSS-Tricks.

The possibilities of the color-adjust property

The Open Web continues to show up in places we would have never originally expected to find it: our phones, televisions, watches, books, video game consoles, fast food menus, gas pumps, elevators, cars—even our refrigerators.

By not making too many or too strict assumptions about how the web should be used, it remains flexible and adaptable. These qualities have allowed it to outperform closed technologies like Flash and Silverlight.

With the web’s growth comes new features to better accommodate its …

The post The possibilities of the color-adjust property appeared first on CSS-Tricks.

Practical CSS Scroll Snapping

CSS scroll snapping allows you to lock the viewport to certain elements or locations after a user has finished scrolling. It’s great for building interactions like this one:

Live Demo
Browser support and basic usage

Browser support for CSS scroll snapping has improved significantly since it was introduced in 2016, with Google Chrome (69+), Firefox, Edge, and Safari all supporting some version of it.

Scroll snapping is used by setting the scroll-snap-type property on a container element and the …

The post Practical CSS Scroll Snapping appeared first on CSS-Tricks.

Creating the “Perfect” CSS System

My pal Lindsay Grizzard wrote about creating a CSS system that works across an organization and all of the things to keep in mind when starting a new project:

Getting other developers and designers to use the standardized rules is essential. When starting a project, get developers onboard with your CSS, JS and even HTML conventions from the start. Meet early and often to discuss every library, framework, mental model, and gem you are interested in using and take feedback …

The post Creating the “Perfect” CSS System appeared first on CSS-Tricks.

Understanding why Semantic HTML is important, as told by TypeScript

What a great technological analogy by Mandy Michael. A reminder that TypeScript…

makes use of static typing so, for example, you can give your variables a type when you write your code and then TypeScript checks the types at compile time and will throw an error if the variable is given a value of a different type.

In other words, you have a variable age that you declare to be a number, the value for age has to stay …

The post Understanding why Semantic HTML is important, as told by TypeScript appeared first on CSS-Tricks.

How to Exclude a Category From Your WordPress Homepage

Do you want to exclude a specific category from your website’s homepage? By default, WordPress displays posts from all categories on your homepage. In some cases, you may not want that. In this article, we will show you how to easily exclude a category from… Read More »

The post How to Exclude a Category From Your WordPress Homepage appeared first on WPBeginner.

How to Create a Table of Content in WordPress Posts and Pages

Did you ever want to add a Wikipedia like table of content box on some of your long articles? A table of content makes it easier for users to jump to the section they want to read. In this article, we will show you how… Read More »

The post How to Create a Table of Content in WordPress Posts and Pages appeared first on WPBeginner.