That's why this blog (at the time of writing) aims to render the default operating system fonts. After reading Stoyan's post on system fonts I could just do a little spring clean up.

tl;dr

body {
  font-family: system-ui, sans-serif;
}

matcha.css is a pure CSS library designed to style HTML elements similarly to a default browser stylesheet, eliminating the need for users to manually patch their documents.

Ideal for fast prototyping, static HTML pages, Markdown-generated documents, and developers seeking to streamline their workflow without delving into CSS intricacies and want to make use of the full range of available HTML elements.

• ✓ No build steps
• ✓ No dependencies
• ✓ No JavaScript
• ✓ No configuration needed
• ✓ No refactoring required
• ✓ ~8.82kB gzipped

Les animations liées au scroll (ou scroll-driven animations) constituent une nouvelle fonctionnalité CSS permettant de synchroniser des animations avec le défilement d'une page ou d'un conteneur. Cette solution native vient remplacer efficacement les scripts JavaScript habituels, avec une meilleure performance et une implémentation simplifiée de manière générale.

Open source vector icons from all popular icon sets

A quick, fun project over the weekend was removing unused CSS from decoded.

Community-made library of free and customizable UI elements made with CSS or Tailwind. It's all free to copy and use in your projects. Uiverse can save you many hours spent on building & customizing UI components for your next project.

TL;DR

@property --_w {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vw; 
}
@property --_h {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vh; 
}
:root {
  --w: tan(atan2(var(--_w),1px)); /* screen width */
  --h: tan(atan2(var(--_h),1px)); /* screen height*/
  /* The result is an integer without unit  */
}

CSS loading animations with minimal effort!

CSS Grid is one of the most amazing parts of the CSS language. It gives us a ton of new tools we can use to create sophisticated and fluid layouts.

It's also surprisingly complex. It took me quite a while to truly become comfortable with CSS Grid!

In this tutorial, I'm going to share the biggest 💡 lightbulb moments I've had in my own journey with CSS Grid. You'll learn the fundamentals of this layout mode, and see how to do some pretty cool stuff with it. ✨

Voici comment je fais pour rajouter automatiquement une balise autour des emojis présents dans mes articles :

function niceEmoji(text) {
  const emojiRegex = /(\p{ExtPict}(\u200d\p{ExtPict}|\p{EMod})*)/gu;
  return text.replace(emojiRegex, '<span class="u-emoji">$1</span>');
}

The @counter-style CSS at-rule lets you extend predefined list styles and define your own counter styles that are not part of the predefined set of styles. The @counter-style rule contains descriptors defining how the counter value is converted into a string representation.

@counter-style - CSS Cascading Style Sheets MDN

This is a roundup of the best websites where you can find and download free HTML templates built with... Tagged with html, css, webdev, frontend.

Creating shapes using CSS is, without any doubt, a classic exercise. In many cases, we try to use hacky code and workarounds, but CSS has evolved, and we have modern ways to create CSS Shapes with clean, reusable code. In this comprehensive guide, Temani Afif explores different techniques for creating common shapes with the smallest and most flexible code possible.

• The first CSS framework based on Material Design 3.
• 10x smaller than others CSS frameworks based on Material Design.
• Translates Material Design to HTML semantic standard.
• Ready to use with any JS framework.
• Highly focused on DX.

Modern CSS Solutions for Old CSS Problems

CSS code generator for a new popular design trend called Neumorphism/Soft UI. I hope this will help designers and developers experiment with it and possibly adapt it. Built with React.js

The goal of this handbook is to provide gentle step-by-step instructions that will help you learn the key concepts of React.

Instead of covering all the theories and concepts of React in their entirety, I'll be teaching you important building blocks of the library. You'll learn about JSX, components, props, states, event handlers, creating forms, and running network requests.

A collection of bad practices in HTML, copied from real websites.

Switch button animated.

For a long time, centering an element within its parent was a surprisingly tricky thing to do. As CSS has evolved, we've been granted more and more tools we can use to solve this problem. These days, we're spoiled for choice!

I decided to create this tutorial to help you understand the trade-offs between different approaches, and to give you an arsenal of strategies you can use, to handle centering in all sorts of scenarios.

Honestly, this turned out to be way more interesting than I initially thought 😅. Even if you've been using CSS for a while, I bet you'll learn at least 1 new strategy!