Home » Web » CSS » So. Many. States.

So. Many. States.

“States” as in, contexts or situations in which any given element might be in. Let’s take a stroll.

Imagine a button. Gosh I love buttons. So useful. We first think of a button in it’s default state. It looks nice and button-like, ready to be clicked. That’s one state. In CSS, we often think of some more:

  • The :hover state
  • The :active state
  • The :focus state
  • If it’s a link, the :visited state

The type of HTML element plays a role as well. Some are easy to style (<a>), some require some extra finagling (<button>, <input type=submit>), some are just plain hard (<input type=file>).

A button might be disabled. Perhaps it’s already been clicked and that’s a way to show the user that. Or it’s a part of a form that can’t be used until a previous area is completed, but it’s on the page to show the user what’s coming.

  • The [disabled] / :disabled state

Variations of a button might have the same default state, but only change the interactive states. For instance a “follow” button might have a default hover state and a “following” button will have the same normal state but a different hover state (expressing: warning! clicking this will unfollow someone.)

Buttons are usually words, but they don’t have to be. The content of the button is like a state:

  • Button is a word
  • Button is an icon or symbol
  • Button is purely a visual affordance
  • A combination

We usually need different button states for various design reasons:

  • A big button
  • A very big button
  • A small button
  • Buttons that butt up right next to each other
  • A button with a dropdown inside of it
  • A button that turns into a spinner when clicked
  • Buttons of different colors

If the button is a word, the size of that word matters, as of course designers need to plan around variable content.

  • Button is a really short word
  • Button is an average length word
  • Button is a long word or string of words, potentially user-generated content
  • Button is so long it is wider than it’s parent element

The purpose of a button could be like a state. It may affect how the button looks or behaves:

  • Button is a submit button
  • Button is a delete / cancel button
  • Button is a glorified link
  • Button launches nuclear missile

Where the button appears could be a state. If you pick up a button and move it to another area, should the button appear differently?

  • Button appears in modal window
  • Button is call-to-action in hero banner
  • Button appears in footer
  • Button is at the end of a form
  • Button is inside of navigation

Perhaps we need button states for how much contrast they need:

  • Button needs to stand out
  • Button needs to blend in

Context can be an important state of course. What situation is the button in?

  • Is it alone?
  • Is there another button next to it? If yes, how does that button relate?
  • Is there a whole row of buttons?

Our websites are dynamic places. Perhaps your website offers accounts or paid services or community features. Any given page could have a different state based on those type of things:

  • The user is logged in or logged out
  • The user is an admin
  • The user’s billing is current or past due
  • The user has unread messages

As front end developers, we know that there is a wide variety of devices out there that can access the web.

  • The button on a low resolution display
  • The button on a high pixel density display
  • The button is on a tiny screen held up close
  • The button is on a huge screen far away

Those devices have different capabilities. Sometimes those capabilities are even influenced by the owners of those devices. Sometimes even browsers with those capabilities fail because of network problems or otherwise.

  • The button when the JavaScript didn’t run
  • The button when the CSS didn’t load
  • The button when the icon inside the button didn’t show

The human beings that use this site are likely very different as well

  • The person seeing the button is colorblind, has an astigmatism, or another visual impairment
  • The person needing to activate the button can’t use a mouse
  • The person needing to find the button is in a state of crisis.

Perhaps different states are required for the type of page the

  • A button that appears in the header of the homepage
  • That same button in that same header, but on a blog post page, where the header is intentionally downplayed
  • The same button in that same header, on a sales landing page

Many sites offer themselves in different languages, which means different language states for our button:

  • The button in English
  • The button in Spanish
  • The button in Portuguese
  • The button in a right-to-left language like Arabic
  • The button in a language with symbols like Japanese

The context a button is in could even transcend the web itself!

  • What time of day is it?
  • What time zone is the user in?
  • Is the restaurant open or not?
  • Is it the day of the event or not? Has the event passed?
  • Is the user geographically close to the laundromat?
  • Did the Brewers win or lose?

So. Many. States.


So. Many. States. is a post from CSS-Tricks

Feed Source: CSS-Tricks
Article Source: So. Many. States.

About Admin

Powered by WP Robot