They say the small things will make or break relationships. That is true, especially for web development, where a simple line of code may make a difference and improve the user experience and the visitors' connection with your website.
It’s now possible to choose between six different color schemes when reading my blog.
I decided to take a slightly different approach than a lot of the solutions I’d seen – a progressively-enhanced version that works with or without JavaScript (JS).
A look at some useful and creative ways to style a list.
The primitive Sidebar layout is a kind of quantum layout whereby the sidebar only exists as a sidebar where there is available space.
Be careful when customizing focus styles, don’t forget to test in forced color modes, and always remember that outline is your friend.
There’s a well-established ‘best practice’ that CSS authors should remove units from any 0 value. There are a few common situations where it will break your code.
One of the biggest causes of layout shifts for my clients is late-loading web fonts, let's look at how to optimize them!
Danglers be gone!
Deep dive into the mechanics of image rendering and when to use each approach.
Integrating CSS grid into an existing application, especially a large one, is not a trivial affair.
In web development, we frequently need to style elements to visually indicate some state they're in.
A tool that calculates the CSS clamp formula to interpolate between two values in a given viewport range.
This is a quick win, for everyone: the visual design is left almost untouched and it’s accessible.
The user's browsing environment is not predictable. Let's learn how to coexist with that unpredictability by using adaptive, contextual spacing techniques.
I had to build a layout that consists of several rows. In each row are two images with a fixed aspect ratio. The two images should have the same height and fill the entire row.
Have you ever thought about a CSS selector where you check if a specific element exists within a parent?
Giving visitors to my website who require increased contrast the ‘enhanced’ level of contrast, and all others the ‘minimum’ level in both Light and Dark Mode.
Goodbye, padding hack.
Let's understand why rem is the ideal unit for font size and how setting the root font size to 62.5% can make our lives easier.
Let's talk about some handy web form APIs that can make forms much more comfortable to fill out: autocomplete and virtual keyboard options.
There are a few different ways to add images to your page depending on what you care about in regards to what part of the image is displayed, the quality, and the performance.
A sizing scale is a uniform progression of sizes based on a scale—or, more accurately, a ratio.
Could you use CSS Grid to draw “pixels” on a resizable, responsive canvas? (“Canvas” as in 🎨, not as in <canvas> ☺️)?
To respect the reduced motion feature doesn’t necessarily mean removing the animation altogether.
The new CSS accent-color property makes it quick and easy to roll out our brand colors to certain form inputs by leveraging user agent styles.
Creating website heroes - aka "headers" - with one of my favorite ways to use CSS grid layout: by turning it into a canvas.
If you want your text to be read, set it at a sufficient size! But what is a good font size, and how can you apply it in your web design?
Like other HTML elements, horizontal rules can be styled using CSS (and SVG).
In the real world, content often differs vastly from the neat, perfectly fitting content presented in designs.
Each time I work on a component that needs absolute positioning, I ask myself: is it really necessary?
Improve user experience by providing a print style sheet for your website.
Recently, I shared a Twitter poll about how many uses mobile-first vs desktop-first, and the results were interesting.
We can’t design the same way we have for this ever-changing landscape, but we can design for content.
There are some changes being proposed regarding viewport units.
Starting with Version 15, Safari supports the theme-color <meta> tag both on macOS and iOS. That’s exciting news because now the first desktop browser supports this <meta> tag and it also supports the media attribute and the prefers-color-scheme media feature.
To ensure accessibility of your interface, JavaScript is a necessary addition to accomplish focus management, respond to keyboard events, and toggle ARIA attributes.
In this article, Ahmad Shadeed explains what HSL is, how to use it, and shares some of the useful use-cases and examples that you can use right away in your current projects.
When someone says 'SVG animation', what do you picture? From conversations at my workshops I've noticed that most people think of illustrative animation. But SVG can come in handy for so much more than jazzy graphics.
Our content will not always look the way we expect it or want it to. Many apps, tools, and environments that people use to browse the Web strip our content of our CSS and apply their own styles to it.
How to implement a multi-theme switcher while respecting user's light/dark mode preference by default in Eleventy.
Good overview of various responsive techniques.
Good how to on optical adjustments
In-depth explainer with a lot of examples.
Comprehensive look at using sub-grid.
Good how-to on CSS performance improvements.
Useful explainer with examples.
List of nifty tricks.
Overview of different techniques.
Different ways to handle form labels with a lot of information.
In-depth look at ways to implement color scheme.
In-depth look at how to use flexbox-gap.
Good drop-shadow explainer.
A neat trick for when you need an alternative to the outline property.
CSS techniques to improve site legibility.
Useful overview of inline-block
In-depth examples of inventive way to use custom properties
Different techniques for hiding elements, how each of them affects the accessibility of the content, and how to properly hide checkboxes and radio buttons taking their own accessibility and usability considerations into account to make sure we aren’t leaving any users out.
Have you ever needed to build a UI where a caption needs to slide over an image on hover, revealing more content?
Detailed explainer with examples.
Comparison of static versus relative units with examples and why it’s still a big deal.
Overview focused on srcset and resolution switching.
In-depth look at how to accessibly use SVGs with radio buttons.
15 things to improve website accessibility.
Comprehensive reference for styling lists.
Handy tricks for text selection control and appearance.
In-depth look at building a dark mode from design to implementation.
In-depth look at use of minmax() and min().
Exploring techniques and trade offs for creating reusable grid components using modern CSS best practices.
Explanation of LCH color space as well as a LCH color picker.
A look at using math functions instead of media queries to handle flexible layouts.
In-depth look at how DevTools can help with flexbox and grid layouts.
Hands on tutorial on how to use transforms to create diagonal sections.
