Have you seen those fancy interactions where a modal window flys down from the top of the page? Maybe it slides in from the side while it fades up to full opacity? Maybe it falls in from above and goes from blurry to focused? Kinda cool, if it fits the vibe of your website.
They always seem to move in a straight line though. Thanks to the fairly new offset-path, they don’t have to!
The offset-path property in CSS …
Move Modal in on a Path is a post from CSS-Tricks
In the last article in this series, we build a lightweight script (6kb, 2.7kb minified) using the Validity State API to enhance the native form validation experience. It works in all modern browsers and provides support IE support back to IE10. But, there are some browser gotchas.
Not every browser supports every Validity State property. Internet Explorer is the main violator, though Edge does lack support for tooLong even though IE10+ support it. And Chrome, Firefox, and Safari got …
Form Validation Part 3: A Validity State API Polyfill is a post from CSS-Tricks
In this series, I’m going to show …
Form Validation Part 1: Constraint Validation in HTML is a post from CSS-Tricks
Solving the sticky element problem can lead to sticky situations
When navigating sites, it is common to see HTML elements, like banners and navigations, sticking to the top and bottom of the browser. …
Stickybits: an alternative to `position: sticky` polyfills is a post from CSS-Tricks
I’ve long advocated SVG icon systems. Still do. To name a few benefits: vector-based icons look great in a high pixel density world, SVG offers lots of design control, and they are predictable and performant.
I’ve also often advocated for a SVG icon system that is based on s (an “SVG sprite") and the <use> element for placing them. I’ve changed my mind a little. I don’t think that is a bad way to go, really, but there is …
A Pretty Good SVG Icon System is a post from CSS-Tricks
Suppose you’ve built a zippy new event listing React app for a client. The app is hooked up to an API built with your favorite server-side tool. A couple weeks later the client tells you that their pages aren’t showing up on Google and don’t look good when posted to Facebook. Seems solvable, right?
You figure out that …
Server-Side React Rendering is a post from CSS-Tricks
I was working with CSS Grid and came to the grid-column and grid-row properties. I paused for a moment.
They’re not overly complicated. They are shorthand properties for expressing where an element should start and end on a grids defined columns and rows.
What caught me was the fact that I can name these lines. It’s not a requirement (you can use numbers), but the ability to name the grid lines is something we can do here. In fact, naming …
Naming Things is Only Getting Harder is a post from CSS-Tricks
This is the bonus round. In this post, the aim will be to get as close as possible to full-blown, class-based …
Reactive UI’s with VanillaJS – Part 2: Class Based Components is a post from CSS-Tricks
Even though CSS is relatively easy to write, it can be quite hard to maintain. The specificity, the global scope of everything, and the lack of guidance can easily lead to inconsistency, code duplication, and over-complication.
I’ve long been curious …
What Does a Well-Documented CSS Codebase Look Like? is a post from CSS-Tricks