-
Providing Type Definitions for CSS with @property
Write safer CSS using `@property`, which enables defining types for custom properties. Learn why traditional fallback values can fail, and how `@property` features improve the resilience of custom property definitions.
-
12 Modern CSS One-Line Upgrades
Sometimes, improving your application CSS just takes a one-line upgrade or enhancement! Learn about 12 properties to start incorporating into your projects, and enjoy reducing technical debt, removing JavaScript, and scoring easy wins for user experience.
-
How Custom Property Values are Computed
Review behaviors to be aware of regarding how the browser computes final custom property values. A misunderstanding of this process may lead to an unexpected or missing value and difficulty troubleshooting and resolving the issue.
-
Modern CSS For Dynamic Component-Based Architecture
Explore modern project architecture, theming, responsive layouts, and component design. Learn to improve code organization, dig into layout techniques, and review real-world, context-aware components that use cutting-edge CSS techniques.
-
Testing Feature Support for Modern CSS
How do you know using a new CSS features is "safe" to use? Review how to find information on new features, test for support, determine when to use a feature, and manage support with fallbacks and build tools.
-
Container Query Units and Fluid Typography
To learn more about the behaviors of container query units, we'll explore three fluid typography techniques applied via a "mixin" using custom properties. These upgraded methods will produce truly responsive typography, regardless of context.
-
Contextual Spacing For Intrinsic Web Design
Learn how to coexist with that unpredictability by using adaptive, contextual spacing techniques. We'll construct a starter set of custom properties for gap, margin, and padding.
-
SmolCSS
Check out the ModernCSS companion site SmolCSS and demo minimal snippets for modern CSS layouts and components
Visit SmolCSS.dev -
Practical Uses of CSS Math Functions: calc, clamp, min, max
Review the four best supported CSS math functions, and see how they can be used in both practical and unexpected ways, such as within gradients and color functions and in combination with CSS custom properties.
-
Modern CSS Upgrades To Improve Accessibility
Accessibility is a critical skill for developers doing work at any point in the stack. For front-end tasks, modern CSS provides capabilities we can leverage to make layouts more accessibly inclusive for users of all abilities across any device.
-
Developing For Imperfect: Future Proofing CSS Styles
How do we plan future-proof styles in a world with an infinite degree of device and user ability variance? Let's explore how things can break and how modern CSS provides solutions.
-
Guide to Advanced CSS Selectors - Part Two
Continuing from part one, this episode will focus on the advanced CSS selectors categorized as pseudo classes and pseudo elements and practical applications for each.
-
Guide to Advanced CSS Selectors - Part One
Whether you choose to completely write your own CSS, or use a framework, understanding selectors, the cascade, and specificity are critical to developing CSS and modifying existing style rules.
-
CSS Tips in Your Inbox
Join my newsletter for article updates, CSS tips, and front-end resources!
Newsletter Signup -
The 3 CSS Methods for Adding Element Borders
In CSS, sometimes a `border` is not really a `border`. In this episode, we'll cover the differences between `border`, `outline`, and `box-shadow` and when to choose each.
-
Support this Series
Enjoying the series? I would appreciate a coffee to help me keep writing and coding!
Buy me a coffee -
Pure CSS Shapes 3 Ways
Modern CSS and modern browser support provides us three excellent methods to create pure, basic CSS shapes. We'll look at making CSS triangles with borders, linear gradients, and `clip-path`.
-
Custom CSS Styles for Form Inputs and Textareas
Create custom form input and textarea styles that have a near-identical appearance across the top browsers, and ensure all states meet contrast requirements.
-
Custom Select Styles with Pure CSS
Modern CSS gives us a range of properties to achieve custom select styles that have a near-identical initial appearance. This solution uses CSS grid, `clip-path`, and CSS custom properties.
-
Pure CSS Custom Checkbox Style
We'll create custom, cross-browser, theme-able, scalable checkboxes in pure CSS. We'll use `currentColor`, the `em` unit, SVG, and CSS grid layout.
-
This is a hell of a series by Stephanie Eckles.
-
Pure CSS Custom Styled Radio Buttons
Learn to create custom, cross-browser, theme-able, scalable radio buttons in pure CSS and ensuring styles remain accessible across states.
-
Announcing Style Stage: A Community CSS Showcase
Learn about Style Stage - an opportunity to challenge both your CSS and web design skills while learning in public. A CSS playground open to contributors of all skill levels!
-
3 Popular Website Heroes Created With CSS Grid Layout
This episode explores creating website heroes - aka 'headers' - by using CSS grid and a unique way to apply grid template areas that you can use to replace older methods that used absolute positioning.
-
3 CSS Grid Techniques to Make You a Grid Convert
Learn three powerful techniques for using grid that don't involve counting columns, including changing the default axis, centering, and responsive layout without media queries.
-
Expanded Use of `box-shadow` and `border-radius`
This episode will explore expanded usage of `box-shadow` and `border-radius` and conclude with a landing page demo using these properties to enhance the image presentation.
-
Container Query Solutions with CSS Grid and Flexbox
Using grid and flexbox, we can create styles that respond to container and content widths and overcome some of the pain points that container queries are proposed to resolve.
-
Generating `font-size` CSS Rules and Creating a Fluid Type Scale
Let's take the mystery out of sizing type. Learn recommended units for `font-size`, how to generate ratio-based fluid sizes with Sass, and how to handle overflow.
-
Resource: The Complete Guide to Centering in CSS
This resource covers the classic CSS question: "How do I center a div?" You'll learn a solution for every variation of how you may want to center something using grid, flexbox, and block element layout.
-
Icon Button CSS Styling Guide
This guide will build on the previous episode 'CSS Button Styling Guide' to explore the use case of icon buttons. We'll cover icon + text as well as icon-only buttons.
-
CSS Button Styling Guide
This guide will explore the ins and outs of styling an accessible, extensible button appearance for both link and button elements.
-
Solutions to Replace the 12-Column Grid
Create simplified responsive grid systems using both CSS grid and flexbox. Using both, we'll create just two classes to handle from 1-4 columns of content that responsively resizes.
-
CSS-Only Accessible Dropdown Navigation Menu
This technique explores using: animation with CSS `transition` and `transform`, using the `:focus-within` pseudo-class, CSS grid, and accessibility considerations for dropdown menus.
-
Responsive Image Gallery With Animated Captions
This technique explores using: `object-fit` for responsive image scaling, `aspect-ratio` for consistent image sizes, a CSS Grid trick to replace absolute positioning, and CSS transforms for animated effects.
-
Totally Custom List Styles
This tutorial will show how to use CSS grid layout for easy custom list styling. We'll cover CSS counters, CSS custom properties, and responsive multi-column lists, as well as the new `::marker` pseudo selector.
-
Pure CSS Smooth-Scroll "Back to Top "
"Back to top" links may not be in use often these days, but there are two modern CSS features that the technique demonstrates well: `position: sticky` and `scroll-behavior: smooth`.
-
CSS-Only Full-Width Responsive Images 2 Ways
Let's look at how to use `background-size` and `object-fit` for similar full-width image effects, and learn when to select one over the other.
-
Equal Height Elements: Flexbox vs. Grid
Review solutions using both Flexbox and CSS grid and learn when you might choose one over the other.
-
Keep the Footer at the Bottom: Flexbox vs. Grid
Floating footers can occur for many reasons, but modern CSS methods using either flexbox or CSS grid let us plan a future-proof solution for any size layout.