Skip to main content

Chris Coyier

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

Almanac

animation

The animation property in CSS can be used to animate many other CSS properties such as color, background-color, height, or width. Each animation needs to be defined with the @keyframes at-rule which is then called with the animation property, like so:

.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}
CodePen Embed Fallback

Each @keyframes at-rule defines what should happen at specific moments during … Read article “animation”

Article

How I Think Posting HTML In Comments Should Work

People post a good bit of HTML in the comments of articles on this site. They are trying to demonstrate something, ask for troubleshooting help, show alternate techniques, etc. This is excellent. I want to encourage this as much as possible. Unfortunately people are often confused on how to do it correctly and get frustrated when it comes out wrong.… Read article “How I Think Posting HTML In Comments Should Work”

Snippet

Add Data Attribute of User Agent

var b = document.documentElement;
b.className = b.className.replace('no-js', 'js');
b.setAttribute("data-useragent",  navigator.userAgent);
b.setAttribute("data-platform", navigator.platform );

Which results in data attributes being added to the html element like:

<html 
	data-useragent="Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)"
	data-platform="Win32">
	...

Which allows you to be able to target very specific browsers on very specific platforms with CSS:

html[data-useragent*="Chrome/13.0"][data-platform="Win32"] {
  ...
}

This was referenced from a post by Rogie Read article “Add Data Attribute of User Agent”

Article

A Really Nice Way To Handle Popup Information

Showing additional info ("popup") when hovering over an element is a pretty easy thing to do. But there is a ton of subtle ways to improve that interaction. This articles goes over a really excellent technique for this covered by Doug Neiner at the Front End Design Conference 2011.