Modern CSS Reset / Global Styles
CSS
The Large, Small, and Dynamic Viewports
There are some changes being proposed regarding viewport units, finally solving that "100vh in Safari on iOS" issue …
Reducing The Need For Pseudo-Elements — Smashing Magazine
For years, pseudo-elements have faithfully helped front-end developers implement creative designs. While they still have an important place, we can now leave pseudo-elements behind in some scenarios, thanks to newer CSS properties.
Less Absolute Positioning With Modern CSS - Ahmad Shadeed
How to use use position:absolute less by leveraging modern CSS
CSS Transforms: The Old the New and the Remarkable
CSS Transforms have been around for a while now and are supported by all major browsers. You can do amazing things with CSS transform, as you’ll learn in this course.
Taming CSS Variables with Web Inspector
CSS Custom Properties, better known as CSS variables, have been widely adopted by web designers to build reusable and configurable design systems.
New CSS Features In 2022 — Smashing Magazine
2022 is shaping up to be a pretty great year for CSS, with a plethora of new features on the horizon. Some are already starting to land in browsers, others are likely to gain widespread browser support in 2022, while for one or two the process may be a little longer. In this article we’ll take a look at a few of them.
A Complete Guide to CSS Cascade Layers | CSS-Tricks
This is your complete guide to CSS cascade layers, a CSS feature that allows us to define explicit contained layers of specificity.
Using mask as clip-path
When I first learned that the path() function is supported in the clip-path attribute,
I was quite excited because it allows clipping with complex shapes other than ellipse or polygons.
CSS { In Real Life } | Aspect Ratio is Great
Fancy CSS Borders Using Masks | CSS-Tricks
In this article, we look at modern CSS mask techniques to create three fancy CSS borders without having to use a background image.
How Flexbox Works
Flexbox can be difficult to understand just by using it. In this post, I explain what the browser does when you use display: flex to trigger a flex formatting context.
Make Beautiful Gradients in CSS, with linear-gradient, radial-gradient, or conic-gradient.
CSS in 2022
With 2021 coming to an end, let's take a look at which CSS language features we can expect to land in browsers in 2022.
How to Create a Pie Chart Using Only CSS
In this post, I will show you how to create a pie chart using CSS and only one element.
uncss/uncss: Remove unused styles from CSS
Remove unused styles from CSS. Contribute to uncss/uncss development by creating an account on GitHub.
Compat 2021 Holiday Update: presents for developers before the end of the year
Responsive iframes with the CSS aspect-ratio property
Today, I want to show you can use a few lines of CSS to make your embedded iframes fully responsive. Let’s dig in!
The challenge with iframes and responsive layouts Unlike images and the native HTML5 video element, iframes do not scale responsively by default.
/** * This does NOT work */ iframe { max-width: 100%; height: auto; } Years back, Dave Rupert put together a great video showing the challenge with responsive iframe videos.
The CSS :has() selector is way more than a “Parent Selector”
Safari TP 137 just dropped with unflagged support for :has(). Often dubbed "the parent selector", :has() is way more than that …
The surprising behavior of "important CSS custom properties"
The '!important` keyword is removed when using custom properties as CSS property values.
The State of CSS 2021
The annual survey about the latest trends in CSS.
Defensive CSS - Ahmad Shadeed
A list of defensive CSS techniques to avoid potential future issues
CSS Shadow Palette Generator
The power of CSS attribute selectors — allround.io
Generating Shades of Color Using CSS Variables
A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH — Smashing Magazine
In this article, we’ll take a look at the best ways to handle colors in CSS today, some tips for using them in a design system, and what we can expect from our colors in the not-too-distant future.
Dynamic Color Manipulation with CSS Relative Colors
Layout patterns
A collection of layout patterns built using modern CSS APIs that will help you build common interfaces such as cards, dynamic grid areas, and full-page layouts.
Using Position Sticky With CSS Grid - Ahmad Shadeed
How to make position sticky work with CSS grid items
The effect of CSS on screen readers | Use Less Divs