The Minimum Code for a CSS Transition

transition-durationHere’s something interesting that you may not have realized about CSS3 transitions. Normally, you’ll see a transition declared by utilizing three different properties, either in longhand or shorthand.

In both cases, we’re explicitly declaring three of the four transition-related properties (leaving out transition-delay). Can a transition occur with less code than that? Well, yes.

What’s the Status of the ::selection Pseudo-element?

::selection pseudo-elementEver since HTML5 Boilerplate put the ::selection pseudo-element on the map, so to speak, most CSS developers nowadays have been including this selector as part of their universal styles.

To get cross-browser support, the ::selection pseudo-element (which is used to change styles on highlighted, or selected, text) is declared like this:

Launching Soon: Web Tools Weekly

Web Tools WeeklyOff and on over the past few months, I’ve been planning and working on a new project that is now ready to launch: Web Tools Weekly, a (you guessed it) weekly email newsletter targeted at front-end developers, with a special focus on tools.

This is not, by any stretch of the imagination, a unique idea. As many of us know, there are lots of options in the recent web dev newsletter boom.

HTML5 History API: A Syntax Primer

History WheelAs most of us probably are aware, a significant part of the HTML5 spec is the expansion of the History API.

This post will not be a super extensive discussion of this subject, especially since it’s something that I’m only now just getting into understanding better. But I thought I would put down the main components of the API, for my own quick reference, and I hope it will prove useful to my readers and those searching via Google.

Good Code Solves Problems

ProblemIt should be a coder’s goal to make sure that every character in every line of code serves some purpose.

The quality of code is not dependent on good form, prettiness, or theoretical benefits. Code should solve problems.

HTML5 lets you omit closing paragraph tags and closing tags for list items. Some cringe at the thought of this, but it’s perfectly valid code. So if omitting extra tags helps your code become leaner and faster, then you’re solving a problem and that makes it good code.

Using tabindex with :focus

Tabindex with :focusFor those who have studied web site accessibility, this is probably old hat. Admittedly, I haven’t spent enough time thinking about accessibility, so this is one of those things I didn’t even realize until recently. So shame on me. :)

Let’s say you have the following page, with various elements, starting with maybe a form field:

Quick Tip: Use HTML Comments to Indicate Pseudo-elements

Use HTML Comments to Indicate Pseudo-ElementsAt the recent W3Conf Nicolas Gallagher explained that although pseudo-elements have helped us add decorative content to our pages while keeping our HTML clean, this has led to some maintainability issues.

Developer tools can help to some degree, but oftentimes dynamically added content like pseudo-elements or extra elements added via JavaScript are initially harder to track down.

As Nicolas pointed out, the far-future improvement in this area is the Web Components spec, but I think this is something we can improve on right now.

thatsNotYoChild.js — Fixing Parent-Child Opacity

on | 9 Comments

Parent/Child signOne of the posts on this website that consistently gets a significant amount of traffic (5000+ page views this month alone) is a ridiculous article I wrote that discusses how to make a child element not inherit the opacity setting of its parent.

As we all know, opacity property can be annoying in this area.

Basically, if a parent element has an opacity value set at, say, 0.5, all of its children will inherit that opacity setting, and there’s no way to reverse that opacity on the child elements.

My Talk and Slides from jQueryTO

on | 4 Comments

jQueryTOOn March 2nd and 3rd, I attended and had the privilege of speaking at jQueryTO, Canada’s first ever jQuery conference. It was a really cool experience, and was especially cool because I finally got to meet in person certain developers that I’ve respected from afar for some time, including Darcy Clarke (who organized it), Paul Irish, Addy Osmani, Alex Sexton, and Adam J. Sontag.

If you’ve been reading this blog for awhile now, then you know that I have little, if any, business speaking at a JavaScript conference. So I tried to keep things fairly simple for myself and proposed a talk where I could focus largely on CSS.