We only want this div to be visible when it’s hovered, so:
We need focus styles as well, for accessibility, so:
But div’s can’t be focused on their own, so we’ll need:
There is content in this div. Not just text, but links as well.
<p>This little piggy went to market.</p>
<a href="#market">Go to market</a>
This is …
Keeping Parent Visible While Child in :focus is a post from CSS-Tricks
Welcome, React aficionados and amateurs like myself! I have a puzzle for you today.
Let’s say that you wanted to render out a list of items in a 2 column structure. Each of these items is a separate component. For example, say we had a list of albums and we wanted to render them a full page 2 column list. Each “Album” is a React component.
Scroll rendering problem
Now assume the CSS framework that you are using requires you …
How Would You Solve This Rendering Puzzle In React? is a post from CSS-Tricks
Open source software is thriving. Large corporations are building on software that rests on open collaboration, enjoying the many benefits of significant community adoption. Free and open source software is amazing for its ability to bring together many people from all over the world, and join their efforts and skills by their interests.
That said, and because we come from so many different backgrounds, it’s worth taking a moment to reflect on how we work together. The manner in which …
An Open Source Etiquette Guidebook is a post from CSS-Tricks
We’ve released a couple of features recently at CodePen that I played a role in. It got me thinking a little bit about the process of that. It’s always unique, and for a lot of reasons. Let’s explore that.
What was the spark?
Features start with ideas.
Was it a big bright spark that happened all the sudden? Was it a tiny spark that happened a long time ago, but has slowly grown bright?
Documenting ideas can help a lot. …
On Building Features is a post from CSS-Tricks
This two-part series is a gentle, high-level introduction to offline web development. In Part 1 we got a basic service worker running, which caches our application resources. Now let’s extend it to support offline.
The Implementation (you are here!)
Making an `offline.htm` file
Next, lets add some code to detect when the application is offline, and if so, redirect our users to a (cached) `offline.htm`.
But wait, if the service worker file is generated automatically, how …
Making your web app work offline, Part 2: The Implementation is a post from CSS-Tricks
This two-part series is a gentle introduction to offline web development. Getting a web application to do something while offline is surprisingly tricky, requiring a lot of things to be in place and functioning correctly. We’re going to cover all of these pieces from a high level, with working examples. This post is an overview, but there are plenty of more-detailed resources listed throughout.
The Setup (you are here!)
The Implementation (posts tomorrow, stay tuned)
Making your web app work offline, Part 1: The Setup is a post from CSS-Tricks
Transitioning border for a hover state. Simple, right? You might be unpleasantly surprised.
The challenge is simple: building a button with an expanding border on hover.
Single element (no helper divs, but psuedo-elements are allowed)
Works for any size (not
Animating Border is a post from CSS-Tricks
No matter how large or small your application is, you’ll have to deal with fetching data from a remote server at some point. On the front end, this usually involves hitting a REST endpoint, transforming the response, caching it, and updating your UI. For years, REST has been the status quo for APIs, but over the past year, a new API technology called GraphQL has exploded in popularity due to its excellent developer experience and declarative approach to data fetching.…
A Front End Developer’s Guide to GraphQL is a post from CSS-Tricks
Experiments are a fun excuse to learn the latest tricks, think of new ideas, and push your limits. “Pure CSS" demos have been a thing for a while, but new opportunities open up as browsers and CSS itself evolves. CSS and HTML preprocessors also helped the scene move forward. Sometimes preprocessors are used for hardcoding every possible scenario, for example, long strings of :checked and adjacent sibling selectors.
In this article, I will walk through the key ideas of a …
How the Roman Empire Made Pure CSS Connect 4 Possible is a post from CSS-Tricks