OR 

Keeping Parent Visible While Child in :focus

Say we have a div. We only want this div to be visible when it‘s hovered, so: div:hover { opacity: 1; } We need focus styles as well, for accessibility, so: div:hover, div:focus { opacity: 1; } But div‘s can‘t be focused on their own, so we‘ll need: div tabindex="0" /div There is content in this div. Not just text, but links as well. div tabindex="0" pThis little piggy went to market./p a href="#market"Go to marke

favicon of http://css-tricks.com

The youth these days couldn‘t possibly understand the abstraction of a floppy disk for a save icon.

People have been kicking that ol‘ chestnut around for years. Do the youngsters have no idea what it is?, we ask. What happens when all the things we based our icons on don‘t exist anymore?, we wonder. Do we need a new one?, and we experiment. Olivia Walch‘s skewering is hilarious: Comic about the kids pic.twitter.com/LneN1Ff32u Olivia (@oliviawalch) December 16, 2017 Baby bear: Make a button and put the word save in it. The

favicon of http://css-tricks.com

Is jQuery still relevant?

Remy Sharp: I‘ve been playing with BigQuery and querying HTTP Archive‘s dataset ... I‘ve queried the HTTP Archive and included the top 20 [JavaScript libraries] ... jQuery accounts for a massive 83% of libraries found on the web sites. This corroborates other research, like W3Techs: jQuery is used by 96.2% of all the websites whose JavaScript library we know. This is 73.1% of all websites. And BuiltWith that shows it at 88.5% of

favicon of http://css-tricks.com

How Would You Solve This Rendering Puzzle In React?

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 Yo

favicon of http://css-tricks.com

When You Just Don‘t Trust a Tab

Do we need a word for when a browser tab has sat too long and you just don‘t trust thing are going to work as you expect them do when you come back? I tweeted that the other day and apparently other people had them feels. It‘s that feeling where you just know your session isn‘t valid anymore and if you actually try to do anything that requires you to be logged in, it ain‘t gonna work. It‘s particularly uncomfortabl

favicon of http://css-tricks.com

Evolution of img: Gif without the GIF

Colin Bendell writes about a new and particularly weird addition to Safari Technology Preview in this excellent post about the evolution of animated images on the web. He explains how we can now add an MP4 file directly to the source of an img tag. That would look something like this: img src="video.mp4"/ The idea is that that code would render an image with a looping video inside. As Colin describes, this provides a host of performance benefits

favicon of http://css-tricks.com

Creating Cue Files from Markdown

Pretty specific, huh? While we‘re going to do exactly what the title says, this post is more about a learning exercise and an example of getting help on the internet. My podcast editor, Chris Enns, is always looking for ways to improve his work and make podcasting better. One kinda cool way to do that is to offer "chapters" so that people can jump around in a podcast to specific points. Through TimeJump, we already offer that on Creatin

favicon of http://css-tricks.com

Calendar with CSS Grid

Here‘s a nifty post by Jonathan Snook where he walks us through how to make a calendar interface with CSS Grid and there‘s a lot of tricks in here that are worth digging into a little bit more, particularly where Jonathan uses grid-auto-flow: dense which will let Grid take the wheels of a design and try to fill up as much of the allotted space as possible. As I was digging around, I found a post on Grid‘s auto-placement algorith

favicon of http://css-tricks.com

Accessibility Testing Tools

There is a sentiment that accessibility isn‘t a checklist, meaning that if you‘re really trying to make a site accessible, you don‘t just get to check some things off a list and call it perfect. The list may be imperfect and worse, it takes the user out of the equation, so it is said. Karl Groves once argued against this: I‘d argue that a well-documented process which includes checklist-based evaluations are better at ens

favicon of http://css-tricks.com

From Local Server to Live Site

(This is a sponsored post.) With the right tools and some simple software, your WordPress development workflow can be downright delightful (instead of difficult)! That‘s why we built Local by Flywheel, our free local development application. Now, we‘ve launched Local Connect, a sweet feature embedded in the app that gives you push-pull functionality with Flywheel, our WordPress hosting platform. There‘s no need to mess with down

favicon of http://css-tricks.com

Slate‘s URLs Are Getting a Makeover

Greg Lavallee writes about a project currently underway at Slate, where they‘ve defined a new goal for themselves: Our goal is speed: Readers should be able to get to what they want quickly, writers should be able to swiftly publish their posts, and developers should be able to code with speed. They‘ve already started shipping a lot of neat improvements to the website but the part that really interests me is where they focus on redef

favicon of http://css-tricks.com

The User Experience of Design Systems

Rune Madsen jotted down his notes from a talk he gave at UX Camp Copenhagen back in May all about design systems and also, well, the potential problems that can arise when building a single unifying system: When you start a redesign process for a company, it‘s very easy to briefly look at all their products (apps, websites, newsletters, etc) and first of all make fun of how bad it all looks, and then design this one single design system T

favicon of http://css-tricks.com

An Open Source Etiquette Guidebook

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 refle

favicon of http://css-tricks.com

ABEM. A more useful adaptation of BEM.

BEM (Block Element Modifier) is a popular CSS class naming convention that makes CSS easier to maintain. This article assumes that you are already familiar with the naming convention. If not you can learn more about it at getbem.com to catch up on the basics. The standard syntax for BEM is: block-name__element-name--modifier-name I‘m personally a massive fan of the methodology behind the naming convention. Separating your styles into small

favicon of http://css-tricks.com

Making your web app work offline, Part 2: The Implementation

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. Article Series: The Setup 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

favicon of http://css-tricks.com

HelloSign API: Your development time matters

(This is a sponsored post.) We know that no API can write your code for you, but ours comes close.We‘ve placed great importance on making sure our API is the most developer-friendly API available - prioritizing clean documentation, an industry-first API dashboard for easy tracking and debugging, and trained API support engineers to personally assist with your integration.Meaning, you won‘t find an eSignature product with an easier or

favicon of http://css-tricks.com

On Building Features

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 B

favicon of http://css-tricks.com