Articles by
Chris Coyier

Founder, writer, designer, spam-deleter, email personality

POSTing an Indeterminate Checkbox Value

There is a such thing as an indeterminate checkbox value. It's a checkbox (<input type="checkbox"/>) that isn't checked. Nor is it not checked. It's indeterminate.

We can even select a checkbox in that state and style it with CSS!

Some curious points though:

  1. It's only possible to set via JavaScript. There is no HTML attribute or value for it.
  2. It doesn't POST (or GET or whatever else) or have a value. It's like being unchecked.

(more…)

Valid CSS Content

There is a content property in CSS that's made to use in tandem with the ::before and ::after pseudo elements. It injects content into the element.

Here's an example:

<div data-done="&#x2705;"
  class="email">
    chriscoyier@gmail.com
</div>
.email::before {
  content: attr(data-done) " Email: "; /* This gets inserted before the email address */
}

The property generally takes anything you drop in there. However, there are some invalid values it won't accept. I heard from someone recently who was confused by this, so I had a little play with it myself and learned a few things.

(more…)

Quick Tip: Debug iOS Safari on a true local emulator (or your actual iPhone/iPad)

We've been able to do this for years, largely for free (ignoring the costs of the computer and devices), but I'm not sure as many people know about it as they should.

TL;DR: XCode comes with a "Simulator" program you can pop open to test in virtual iOS devices. If you then open Safari's Develop/Debug menu, you can use its DevTools to inspect right there — also true if you plug in your real iOS device.

The dialog element

Chris Manning digs into <dialog>:

A dialog element provides:

  • An element that is easy to show and hide, including an open boolean attribute on the element itself.
  • Two versions: a standard popover or modal version.
  • A ::backdrop pseudo-element for modal types.
  • Built-in focus: see dialog focusing steps.
  • ARIA role support (dialog is the implied default). Also accepts the alertdialog role.
  • A pending stack for multiple dialogs.
  • A DOM interface with the open boolean and methods show, showModal, and close.

And those are just some highlights! Showing content on top of other content has never been easier.

This is the evolution of the web at it's best. Identifying a major developer struggle and helping solve it.

Unbuttoning Buttons

We dug into overriding default buttons styles not long ago here on CSS-Tricks. With garden-variety fully cross-browser-supported styles, you're looking at 6-10 CSS rules to tear down anything you need to off a button and then put in place your own styles. Hardly a big deal if you ask me, especially since it's extremely likely you'll be styling buttons anyway.

Scott O'Hara has taken a look as well including a couple of interesting other CSS explorations, neither of which stacked up for different reasons:

  • display: contents; - some semantics-based accessibility problems.
  • all: unset; - doesn't reset display value, not good enough browser support.

It took me a little bit to wrap my head around this, including having a little chat with Scott over DMs. I was so confused that the correct way to do what he was laying out was <span role="button" tabindex="0" onClick="...">. What?! I thought. It's almost never the correct thing to do to force a non-button element to behave like a button and have to replicate all the button functionality in other ways. And indeed, if you just have like a word-or-two kinda button, you probably don't need to, and can just un-do button styles. The trouble comes in here: you cannot un-do inline-block on a <button>. Apparently, it's just impossible. You can set it to display: inline; and it will take it, but it won't behave like it.

Material Design Animation Guides

I've seen two guides posted to Medium about animation in the last month that have seriously blown up!

There is a lot to learn in each one! The demonstration animations they use are wonderfully well done and each guide demonstrates an interesting and effective animation technique, often paired next to a less successful technique to drive the point home. They are both heavily focused on Material Design though, which is fine, but I think Val Head said it best:

Google wrote material design for branding Google things. When you use material design on things that aren’t Google, you’re kind of using Google’s branding on a thing that is not Google, and that’s weird. Material design is Google’s opinion on motion. It’s Google’s branding opinion on motion. It’s not a de facto standard of how motion should happen.

Moving Backgrounds With Mouse Position

Let's say you wanted to move the background-position on an element as you mouse over it to give the design a little pizzazz. You have an element like this:

<div class="module" id="module"></div>

And you toss a background on it:

.module {
  background-image: url(big-image.jpg);
}

You can adjust the background-position in JavaScript like this:

const el = document.querySelector("#module");

el.addEventListener("mousemove", (e) => {
  el.style.backgroundPositionX = -e.offsetX + "px";
  el.style.backgroundPositionY = -e.offsetY + "px";
});

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag