What has brought things to a head, I think, is the realization that the tech industry can be isolating — maddeningly isolating — for a black woman.

I’m tired of being The Only.

Developers are awfully fond of the word “community.” The word comes up again and again when discussing programming languages. We speak of a JavaScript community, a PHP community, or just generally, a developer community. But communities have norms and boundaries, usually unspoken. It’s those unspoken boundaries that I want to talk about.

It’s not a secret that tech — and I’ll focus here on web developers and designers — is really white and really male. According to the A List Apart 2011 Survey (the latest year published), our industry is 87.1% white and 81.6% male. It’s also only 1.2% Black / African.^* Surveys have their biases, of course. But my experiences seem to prove this right. If there are 50 web developers in a room, there’s a really high likelihood that I will be the only woman and the only black person. Intersectionality is my career struggle.

People tend to befriend those who share their background, interests and outlook. I’m no exception. My friend circle is made up of hip-hop heads, sports fans, feminists, secularists, music addicts, art lovers, writers, cocktail enthusiasts, queer people and their allies, tomboys, and (oddly) librarians. Most of us are educated, sometimes highly. They also look more like me — tending towards women and people of color — than the attendees of your average technology gathering.

When I walk into a tech event, an interview, or any room full of strangers, I scan it for potential friends. People who match that pattern are the ones I feel most comfortable approaching. I even look and listen for signs: rainbow stickers on the laptop, Nike or Adidas high tops, or jokes that reference the music I listen to. When I don’t see people who match my pattern, I feel extremely out of place.

I think the same is true for most of us. And therein lies the problem, or my problem, anyway. Web developer communities often feel desperately homogeneous in terms of their culture.^** Peppering a talk with Star Wars or punk music references is cool. But I’d feel more at home if there were more devs who could make Jay-Z jokes or catch my Drake references. I’m honestly not sure what to do about that. But I know it’s part of what keeps me from participating in these communities.

Why is this important? Because community connections and work relationships make or break careers. Indeed having a work friend actually increases your work satisfaction. If you can’t make friends in your industry or at your work place, what is the likelihood that you’ll remain in either?

Culture and community aren’t exclusively web developer problems, of course. Librarian culture and its community, for example, is heavily gendered and skews female. Again, I don’t even pretend to know how to fix this. But I can say that for me, this developer culture is a big reason why I don’t feel like I am a part of its community.

* I have trouble with that label because “African” is not the same as “black.” Black as an identity really only exists in contrast to white and most Africans don’t have to work with that issue. Kind of like how “Hispanic/Latino” doesn’t exist outside of the United States.

**Yeah, I realize the limits of this sentence once we step outside of a U.S. context.

Consider that my first lightbulb moment.

I’ve struggled with math since my days of long division, but not necessarily in the ways you might expect. I mean, my cousin taught me how to solve algebraic equations when I was 8. Typically, my #mathstruggle falls into one of two categories:

1. Simple mistakes: for example, forgetting to carry the 1, or using a – instead of a +
2. Procedural mistakes: mis-remembering precisely how to solve a problem.

I’ve made one or both of those mistakes so many times and in so many ways that eventually, my internal dialogue started to go like this: Oh shit! Numbers. And not just numbers, but equations! Um okay. Seven times two is fourteen, and carry the one, and multiply 2 times 5 and add the one, then do that to the other side and OMG THE ANSWER IS A GINORMOUS FRACTION! THAT CAN’T BE RIGHT! AND I’M SO STUPID AND WILL NEVER EVER GET MATH, LIKE EVER! Sometimes this is capped by me sobbing and throwing my pencil.

Getting so wound up served me well when it came to taking tests. I’d freak out about problem 3, spend 10 minutes getting cognitively overwhelmed by my anxiety, and another 10 trying to calm down enough to finish the test. As you might imagine, this did wonders for my math grades. And bad grades in math only reinforced my narrative about my ability to understand and do well at it.

Late last year, I read an article about the math successes of Asian-American students in New York City’s schools. This quote is what stuck out for me.

“Most of our parents don’t believe in ‘gifted,’” said Riyan Iqbal, 15, the son of Bangladeshi immigrants, as he and his friends ’ of Bengali, Korean and Indian descent ’ meandered toward the subway from the Bronx High School of Science one recent afternoon. “It’s all about hard work.”

That’d be my second lightbulb moment.

I was always one of those ‘gifted’ kids growing up, despite my struggle with math. I never really worked hard at any subject. I just figured I just wasn’t naturally good at math in the same way I was naturally good at remembering dates and understanding cause-and-effect as you do in history class. It honestly never occurred to me that if I paid attention, did my homework, and sought extra help when necessary — y’know worked hard — that my grades would improve. Plus I kind of didn’t care about grades.

Let’s go back to that article on CSS Transforms. While researching it, I learned that transform matrices — math! — were intimately tied to computer graphics. There are scale and rotation transformations, but even the Gaussian blur can be explained by a transformation matrix. I mean math and computing go together like ackee and saltfish or gin and tonic.

Maybe that’s my third lightbulb moment. It’s certainly the one that sent me back to school. Yup. I am currently enrolled in an Introductory Algebra class at one of Los Angeles’ community colleges. Next up is Intermediate Algebra, followed by some introductory computer science classes. Whether I go all the way and get a second bachelor’s degree in computer science will depend greatly on how soon and what kind of employment I find. But this is the path I’m currently on.

What’s different is that I get it now. I still only sort of care about grades, but I see how math is cumulative. Basic skills are your foundation for advanced ones. Concepts compound each other. I see how it relates to my work. And I see my skills improving this time around because I took advice from a 15 year old named Riyan Iqbal and decided to work at it.

* And by “love math,” I really mean “no longer weep and curl into a ball when I encounter math.”

Someone else — sometimes in the group targeted, sometimes not — says “Hey THAT’S RACIST!”

Someone else, usually not in the target group (read: “someone not black / Latino / Asian American / Native American, because those are typically the groups of people this kind of thing involves”) says “Geez! You’re so sensitive. Can’t you take a joke?”

Somebody, often, but not necessarily of the target group (and again, by “target group,” I mean a person of color or POC), says “STOP DIMINISHING MY PAIN, YOU RACIST FUCKWIT.”

At this point, someone else, usually a POC jumps in (or is asked to weigh in) and says “Whatever. It’s not racist. I’m a POC, so I’m an official arbiter of this shit.” Sometimes this person will add “Or maybe it’s because I grew up in the suburbs, and therefore am not as blackety-black (or brownety-brown, etc.) as these other POC who have a problem with it.”² And/or “I am used to white people’s shenanigans, and if I got mad every time I had to deal with white people shenanigans, I wouldn’t get shit else done.” The subtext is usually “GOSH OTHER POC/NON-POC ALLY STOP BEING SO SENSITIVE!” (Hint: look for the phrase “thick[er] skin.”)

This aforementioned POC co-signer may also ask “WHY ISN’T THIS CLASSIST? WHY ARE GHETTO PEOPLE’S WAYS CONSIDERED ALL OF OUR WAYS?” At this point, if you’re lucky, someone will drop a link to the intersectionality wikipedia page into the debate and point out that:

• it’s racist, but deeply shaped by class;
• can’t exactly be separated from class (“It’s 52.8% racist and 47.2% classist!”);
• and classism isn’t a distinction most of the observers of this discussion are going to make.

But usually ends is with pleas for “reason,” “sanity.” And people get nowhere because they’re too busy arguing whether one side’s right to make a kinda racist, kinda classist, but mostly just a really shitty, corny, supremely groan worthy, lame-ass attempt at a joke supercedes the other side’s right to at least demand that if you’re going to appropriate a slang term popularized by the predominantly black (and Afro-Latino) art form known as hip-hop and try to make a joke that explicitly links it to prison culture, then perhaps you should work on improving your comedy writing skills. ³

¹ And by “mostly harmless,” I mean “doesn’t deprive anyone of life, liberty, health, or employment.”

² Yeah, I am probably projecting based on previous experiences with such black folks. Actually, this entire post could fairly be called a cheap shot. But for what it’s worth, I am also from the suburbs, but not the kind where “grew up in the suburbs” is code for “grew up around white people.” How’s that for confounding your race-and-class expectations? (And why do people try to make this a class / geographic thing? whenBy the way, his comment, as any bourgeois Negro knows is an examplea prime example of post-blackness.)

³ Now, I didn’t bother reading past like the third post in that thread because I know how to spot a hot ass Internet mess at 20 paces. I knew whatever I said, no matter how carefully I said it, would be picked apart and contorted, if not dismissed outright, and odds were high I’d also get called a “reverse racist” in the process.

That said, I noticed the original “shiv”/”homie” comment back in like 2008? 2009, maybe? It rankled me then for the reasons I explained above. I chose to ignore it, however. I knew from my decade of prior experience trying to serve “Diversity 101″ lessons up to college chums and internet assholes that it would turn into a shit storm. And who wants to be at the eye of an industry shit storm? So instead, I chose to roll my eyes and crack jokes to myself and others about the diversity of the developer team’s friend circle(s). We may also have pondered whether there’s a relationship between failed jokes like this and the relative dearth of black American and Hispanic web developers in the industry.

By the way, you can replace POC with “woman” and racism/classism with “sexism” and this is pretty much how conversations about gender go too.

So what’s going on? Well, it has to do with transformation matrices, these bits of mathematical goodness that allow us to change where points are plotted within a coordinate system — in this case, your document viewport.

In May of 2013, I wrote an article for Dev.Opera about transform matrices. If you haven’t read it yet, please do. It lays the groundwork for what I’m about to discuss here.

Coordinate systems

If you’ve ever taken algebra or geometry, you’ve probably learned about coordinate systems. You probably remember that the x-axis is horizontal, the y-axis is vertical, and the z-axis is perpendicular to them both.

If we move the coordinate system to our document viewport, our x axis goes from left-to-right on screen and the y axis goes from the top to the bottom. The z-axis sits perpendicular to the screen and viewer, but the screen itself is the 0 point of the z axis. Hold on to that point. We’ll come back to it.

Coordinate vectors and matrix multiplication

Let’s imagine that you have an object whose top left corner sits 100 pixels from the left edge of the document viewport, and 200 pixels from its top. This means its coordinates are (100,200,0) in a three dimensional system. It exists on the same plane as the screen, which as mentioned above, has a z-coordinate of zero.

Now let’s say we wanted to scale our object along the z axis by a factor of three — either scale3d(1,1,3) or scaleZ(3). That, by the way, is equivalent to matrix3d(1,0,0,0,0,1,0,0,0,0,3,0,0,0,0,1);. We need to multiply our coordinate vector by our matrix as show in figure 1.

[1 0 0 0]   [100]    [100]
[0 1 0 0] • [200] =  [200] 
[0 0 3 0]   [  0]    [  0]  
[0 0 0 1]   [  1]    [  1]

Notice anything weird about the product? It looks just like our coordinate vector. Because our z-coordinate value hasn’t changed, our transform doesn’t appear to be rendered on screen.

In other words, in order for a scaling transform along the z-axis to work, the matrix product of the transform must result in a z coordinate with a non-zero value.

Let’s run the math on an example using transform: rotateY(20deg) scale3d(1,1,10). First we need to multiply our rotation matrix by our scaling matrix, as shown in figure 2.

[1 0  0 0]   [ 0.9397 0 -0.3420 0]   [0.9397 0 -0.3420 0]
[0 1  0 0] • [ 0      1  0      0] = [0      1  0      0]
[0 0 10 0]   [-0.3420 0  0.9397 0]   [3.420  0  9.397  0]
[0 0  0 1]   [ 0      0  0      1]   [0      0  0      1]

This gives us a compound transform that we can then multiply by our coordinate vector from above ([100,200,0,1]) as we’ve done in figure 3.

[0.9397 0 -0.3420 0]     [100]   [ 94]
[0      1  0      0]  •  [200] = [200]
[3.420  0  9.397  0]     [  0]   [ 34]
[0      0  0      1]     [  1]   [  1]

Our product, [94,200,34,1] translates to a three dimensional coordinates of (94,200,34), and boom, our transform works as expected.

Cue loud, auto-playing music. And a case of embarrassment for you.

Multimedia and resource-intensive animations are precisely the kinds of things the
Page Visibility API is designed to help manage. The specification is still a working draft, but is at least partially supported in all major browsers.

Browsers that support this API fire a visibilitychange event (prefixed in some browsers) whenever the browsing context — a browser tab or window — of a document gains and/or loses visibility.

What causes a document to gain or lose visibility? Weeeeell, that depends on the browser. Safari doesn’t yet support the Page Visibility API. In Opera 12.10 and Chrome (14.0+), a visibilitychange event gets dispatched whenever the user switches tabs. Firefox (10.0+) and Internet Explorer (10+) do the same. However, IE and Firefox also fire a visibilitychange event when the window is minimized.

In my experiments, Firefox 19+ (I haven’t tested earlier versions) also fires a visibilitychange event when the document loads or unloads. In both cases, the values of document.visibilityState and document.hidden were hidden and true, respectively. Inline frames also inherit the visibility of their containing document’s browsing context.

Of course, the Page Visibility API does have its limits. Browsers do not fire an event if the user opens a new window that covers the first. Similarly, this API can’t tell you whether or not the browser window is the active window. If you switch applications, your document code will be executed as though the browser window was at the fore.

So now that I’ve burst your bubble and thrown a dozen caveats at your head, let’s look at the API.

About the API

As far as DOM APIs go, the Page Visibility API is one of the more straightforward ones to use. It consists of two properties and an event.

• document.visibilityState: Its value may be visible or hidden.
• document.hidden: A boolean property, whose value may be true or false
• visibilitychange: An event that can be listened for.

Two more properties, prerender and unloaded, are defined in the editor’s draft of the specification. However, not all browsers support these properties.

To use, you’ll need to set an event listener on the document object, and define an event handler. You can then query the document.hidden or document.visibilityState properties to determine the state of the document.

var vischangehandler = function(){
    // Check the document.hidden or document.visibilityState property
    if( document.hidden === true ){
    	// Stop the animation. Pause the video. Mute the audio.
    } else {
    	// Start or resume the animation, video, etc.
    }    
}
document.addEventListener('visibilitychange', vischangehandler, false);

Keep in mind that in the latest versions of Chrome and Internet Explorer, and older versions of Firefox, these properties and the visibilitychange are still prefixed. A table of prefixed properties and events follows.

Testing for support

Of course, in order to use the Page Visibility API, you need to test whether or not the browser supports it. A simple document.visibilityState === undefined check works, but it doesn’t check for prefixed versions. We might also want to abstract away some of the prefix business. One way to do this is shown below.

(function(){

   function define_property(obj, propertyname, func){
      if( Object.defineProperty ){
         Object.defineProperty( obj, propertyname, { get: func });
      } else {
         obj.__defineGetter__(propertyname, func);
      }
   }

   if( document.visibilityState === undefined ){
      define_property( HTMLDocument.prototype, 'visibilityState', function(){
         var o;
         for(o in document){
            if( (/VisibilityState/).test(o) ){
               return document[o];
            }
         }
      });	

      ['moz','webkit'].map(function(p){	
         var visibilitychange = p+'visibilitychange';  	

         document.addEventListener( visibilitychange, function(e){
            if( e.type !== 'visibilitychange' ){
               var vischange = document.createEvent('Event');
               vischange.initEvent('visibilitychange', e.bubbles, e.cancelable );
               document.dispatchEvent( vischange );
            }
         }, false); 		
      });
   }

   if( document.hidden === undefined ){	
      define_property( HTMLDocument.prototype, 'hidden', function(){
         var o;
         for(o in document){
            if( (/Hidden/).test(o) ){
               return document[o];
            }
         }
      });	
   }
})();

I’ve also published this as a Gist.

A working example: CSS Animations

Let’s look at a working example of the Page Visibility API using CSS Animations. In this example, we will rotate three divs along the y-axis. When our page isn’t visible, we will pause the animation (it’s a very simple one) and log the status in the console. First our CSS. Note here that:

1. I am only including the animation-related CSS.
2. I am not using prefixed properties.

Some browsers still require prefixed properties in order for this animation to work.

@keyframes rotatey {
    from {
        transform: rotateY(1deg);
    }

    to {
        transform: rotateY(360deg);
    }		
}
#stage{
    perspective: 500px;
}
.facet{
    animation-duration: 10s;
    animation-iteration-count: infinite;
}
.rotatey .facet{
    animation-name: rotatey;
}

Now in our event handler, we will just toggle the rotatey class (using classList). Again, here I am using un-prefixed properties and events.

var vchandler = function(e){
    var stage = document.getElementById('stage');
    
    if( document.hidden === false ){
        stage.classList.add('rotatey');
        console.log('Tab is visible');
    } else {
        stage.classList.remove('rotatey');
        console.log('Tab is not visible');
    }
}
	
// Here we're going to start the animation upon page load.
window.addEventListener('DOMContentLoaded', vchandler,false);
document.addEventListener('visibilitychange', vchandler,false);

View it in action.

Setting and clearing timeouts using setTimeout() and clearTimeout() or starting and stopping animations with requestAnimationFrame() and clearAnimationFrame() work similarly.

In WordPress 3.5, it’s possible to add a gallery using the gallery short code, and a comma-separated list of image identifiers. For example:

[gallery ids="729,732,731,720"]

This short code is parsed by the gallery_shortcode function, found in wp-includes/functions.php. gallery_shortcode returns markup and some rogue CSS. When building a theme, however, you may want to force some constraints on the gallery. Or you may wish to change its markup to get rid of that CSS. All of these changes should be made in your theme’s functions.php file, and you’ll need to know PHP.

If you want to customize the function, first you’ll need to remove the existing short code hook using remove_shortcode('gallery', 'gallery_shortcode'). Next, you’ll need to add a new hook using add_shortcode('gallery', NEW_GALLERY_FUNCTION); Where NEW_GALLERY_FUNCTION is the name of your replacement function. Then you can copy the gallery_shortcode from wp-includes/functions.php, and make whatever adjustments you’d like. What follows is a quick-and-dirty example from a real-life project (emphasis on dirty) that is more or less a duplicate of gallery_shortcode.

remove_shortcode('gallery', 'gallery_shortcode');
add_shortcode('gallery', 'custom_gallery');

function custom_gallery($attr) {
	$post = get_post();

	static $instance = 0;
	$instance++;

	# hard-coding these values so that they can't be broken
	
	$attr['columns'] = 1;
	$attr['size'] = 'full';
	$attr['link'] = 'none';

	$attr['orderby'] = 'post__in';
	$attr['include'] = $attr['ids'];		

	#Allow plugins/themes to override the default gallery template.
	$output = apply_filters('post_gallery', '', $attr);
	
	if ( $output != '' )
		return $output;

	# We're trusting author input, so let's at least make sure it looks like a valid orderby statement
	if ( isset( $attr['orderby'] ) ) {
		$attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
		if ( !$attr['orderby'] )
			unset( $attr['orderby'] );
	}

	extract(shortcode_atts(array(
		'order'      => 'ASC',
		'orderby'    => 'menu_order ID',
		'id'         => $post->ID,
		'itemtag'    => 'div',
		'icontag'    => 'div',
		'captiontag' => 'p',
		'columns'    => 1,
		'size'       => 'thumbnail',
		'include'    => '',
		'exclude'    => ''
	), $attr));

	$id = intval($id);
	if ( 'RAND' == $order )
		$orderby = 'none';

	if ( !empty($include) ) {
		$_attachments = get_posts( array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );

		$attachments = array();
		foreach ( $_attachments as $key => $val ) {
			$attachments[$val->ID] = $_attachments[$key];
		}
	} elseif ( !empty($exclude) ) {
		$attachments = get_children( array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
	} else {
		$attachments = get_children( array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby) );
	}

	if ( empty($attachments) )
		return '';

	$gallery_style = $gallery_div = '';

	if ( apply_filters( 'use_default_gallery_style', true ) )
		$gallery_style = "<!-- see gallery_shortcode() in functions.php -->";
	
	$gallery_div = "<div id='homepage-gallery-wrap' class='gallery gallery-columns-1 gallery-size-full'>";
	
	$output = apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div );
	
	foreach ( $attachments as $id => $attachment ) {
		$link = wp_get_attachment_link($id, 'full', true, false);

		$output .= "<div class='homepage-gallery-item'>";
		$output .= "
			<div class='homepage-gallery-icon'>
				$link
			</div>";
		if ( $captiontag && trim($attachment->post_excerpt) ) {
			$output .= "
				<p class='wp-caption-text homepage-gallery-caption'>
				" . wptexturize($attachment->post_excerpt) . "
				</p>";
		}
		$output .= "</div>";
	}

	$output .= "</div>\n";

	return $output;
}

You could also add another type of gallery rather than override the existing function. To do that, simply use add_shortcode(NEW_SHORTCODE, NEW_GALLERY_FUNCTION);, where NEW_SHORTCODE is the short code you wish to use, say [full_screen_gallery] and NEW_GALLERY_FUNCTION is the name of your new function.

Instead it’s the part where I keep my husband (dude, he’s awesome) and sit around laughing at it all because … REALLY?

I guess it started just before New Year’s Eve with a call from my mother. My father — who had been battling a few forms of cancer since 2012 — was in the hospital. According to Mom and what she said the doctors told her, this was a temporary, but not life-threatening set back. Some intravenous fluids, time, rehab, and continued chemo and he’d be as fine as any other person battling cancer. I didn’t entirely buy this. So I booked a plane ticket. I wanted to see for myself, and if he was coming back home soon, I wanted to help him get better. My plan was to take a red eye January 7th and arrive January 8th.

My father died January 5th.

I flew to North Carolina anyway to help make funeral arrangements. My mother wanted to have the funeral on a weekend to allow the broadest range of people to make it and my dad was a veteran, making him eligible for a free burial at a federal cemetery. That meant the funeral would be Saturday, January 12th. The burial would be Tuesday, January 15th.

On the morning of January 16th, I received word that I would be out of a job as of January 31.

Yes. In the span of 11 days, I lost a parent and a job. Of course. Because when life hands you shit, it likes to pile it on.

My manager was apologetic about the timing. I sort of tuned out and only heard bits and pieces of his explanation. I actually had to stifle a chuckle by the end of the conversation. It was all darkly comedic.

I can’t even say either event was unexpected. I just didn’t think they’d come so soon into 2013, let alone back to back.

What’s next? Eh, I’m not sure yet. I’ve toyed with the idea of joining the L.A. slash-er lifestyle: freelance web developer (slash) jewelry designer (slash) visual artist (slash) technical writer (slash) bon vivant. For years, I’ve dreamed about having a flexible life: one where I not only earn enough to live well, but one where I have enough time to live well. I have severance. I have savings. And I have an employed husband, so this seems possible in a way it never was before.

That said, hustling for business is tough. Plus there are areas of technology in which I’d like to deepen my experience. There are problems I’d like the chance to solve. So I am also not opposed to the right full-time opportunity.

In the immediate short-term, however, I plan to enjoy some (f)unemployment. I’ll explore LA some more. I’ll deep-dive into some APIs and frameworks I’ve ignored, and re-engage with my hobbies. January 2013 has been a particularly bad January. I kind of relish having this time to recharge and reset.

Except it wouldn’t. Business competitiveness and user fragmentation would ensure as much.

As Peter-Paul Koch explained back in 2009, There is no WebKit on Mobile. There’s not really a WebKit on desktop either. On desktop, there’s Apple’s Safari, which uses WebKit’s JavaScriptCore, and Google’s Chromium / Chrome which uses V8. Google developed V8 for speed. If Opera was so inclined — and I can’t emphasize enough that this is a hypothetical scenario — they could release a version of WebKit’s rendering core with Carakan as the JavaScript engine.

WebKit, as a project, is dominated by employees of Apple and Google. Those companies can easily prevent a feature from gaining traction. A feature could, for example, land in core, but take some time to be released in a product. Or a feature can be committed to Safari, Chromium, or some other fork without making it back into WebKit core at all. (This is probably a good time to mention that Chromium says it prefer[s] to contribute as much code as possible upstream to improve all WebKit-based browsers.)

And this is before we discuss mobile device implementations. Android WebKit (which is essentially dead, but still lives on in older Android devices) is different from iOS Safari, which is different from Chrome for Android, which is different from BlackBerry’s WebKit, and Ericsson’s experimental Bowser.

If this sounds at all like fragmentation, it should. That’s exactly what it is. WebKit is not a cure-all for what ails us.

Opera included full support for @supports and its JavaScript API (with the older window.supportsCSS() syntax instead of CSS.supports()) in its 12.10 release.

Firefox has supported the CSS portion of @supports for awhile. However, now in Firefox you can test whether a particular CSS feature is supported using the CSS.supports() API. For example, you may want to include a JavaScript animation library if CSS3 animations aren’t supported.

if( CSS.supports('animation-name', 'none' ) ){
    var js = document.createElement('script');
    js.src = 'animation-script.js';
    document.head.appendChild(js);
}

Note that CSS.supports() returns true if the property is a literal match for the name of a CSS property that the UA supports and the value provided would be successfully parsed as a supported value for that property. This means CSS.supports('background','none') is true, but CSS.supports('background','pixies') is false.

In Opera, the syntax is slightly different. You need to use window.supportsCSS('animation-name','none') instead. In your development process, you may want to abstract away the syntactical differences, since CSS.supports() will become the final syntax.

That said, implementations between Opera and Firefox (Aurora) differ slightly for reasons I need to investigate. For example, CSS.supports('animation-name') currently evaluates to true in Opera 12.1x and false in Firefox. Yet CSS.supports('animation-name',null) evaluates to true in both (as does CSS.supports('animation-name', 'none') since ‘none’ is a valid value).

Webkit support for @supports is complete. So far, it is only available in builds that have the CSS3_CONDITIONAL_RULES flag enabled. As of January 17, this does not include the WebKit Nightly release for Mac, which means it also isn’t yet available in any versions of Chrome or Safari.

Support also hasn’t landed in Opera Mobile or Firefox for Android. I can only assume that the Internet Explorer team is working on it.

Related: Supporting and detecting @supports

@supports (display: flex){
    /* Include flexible box styling here */
}

You can also test for negation, and provide rules for cases when a feature is not supported.

@supports not(display: heffalump){
    /* Include not-heffalump styling here */
}

My colleague Chris Mills wrote about the feature for Dev.Opera.

@supports JavaScript API

Opera supports an earlier version of the JavaScript API with the window.supportsCSS() method. Using this method is as simple as passing a property and value.

var hasFlex = supportsCSS('display','flex');

After landing in Opera, the specification changed to add a window.CSS object and supports method instead of window.supportsCSS(). Future syntax will probably be as follows.

var hasFlex = CSS.supports('display','flex');

Testing for @supports support

Of course, this only works when the browser supports @supports. So how do we test for that?

The simplest way I’ve found takes advantage of the CSS Object Model and its CSSRule interface. @supports extends the CSSRule interface to add the SUPPORTS_RULE constant. In browsers that don’t support @supports, its value will be undefined.

function hasAtSupports(){
  return (window.CSSRule !== undefined) && (window.CSSRule.SUPPORTS_RULE !== undefined);
}

I’ve also published this as a gist.

Using the above method has its limits, however. It will tell you whether @supports is available at all, but cannot be used to detect specific features. For that, try my atsupports.js polyfill (My first polyfill! Please be gentle!), or use Modernizr. The atsupports.js polyfill adds window.CSS.supports to browsers that support @supports but not its JavaScript API. It uses window.supportsCSS() if available. You can see how this works in Opera or Firefox (WebKit support is in a very early stage. Firefox’ window.CSS.supports() support is in progress).

Modernizr versus @supports

As Bruce wrote recently, native @supports will perform better than JavaScript. This is true. However, Modernizr offers tests for JavaScript APIs in addition to CSS3. If you’re using newfangled HTML5 features in addition to the fancier bits of CSS, Modernizr may be the more prudent choice.

I’m not one to be caught looking stupid twice, so I promptly did some Google-ing, and learned about the document.createDocumentFragment() method.

How. Did I. Not. Know. About. This. Already? This method improves your JS performance by creating a container of sorts. You can append the container and then add it to the DOM in one operation instead of several. As we know, DOM operations are expensive. Reducing the number is a great way to make your scripts more efficient.

The code in question created several objects and added them to the DOM one-by-one.

var fruits = ['apple','orange','banana','mangosteen','pineapple'],
    ol = document.getElementById('thelist');

fruits.map( function( o ){
    var li  = document.createElement('li');
    li.textContent = o;
    ol.appendChild( li );
});

This works of course, but it creates multiple reflows. Let’s improve its efficiency by using document.createDocumentFragment().

var fruits = ['apple','orange','banana','mangosteen','pineapple'],
    ol,
    df = document.createDocumentFragment();

fruits.map( function( o ){
    var li  = document.createElement('li');
    li.textContent = o;
    df.appendChild( li );
});

ol = document.getElementById('thelist');
ol.appendChild( df );

There’s a little more code involved, but now it’s updating the DOM tree once. You can see how each stacks up speed-wise in this performance test.

One of my favorite parts of HTML5 forms is the datalist element. Opera added support in version 9.0. Support in Firefox and Internet Explorer followed. Today, datalist finally landed in a Chrome beta release.

Simply put, datalist is a way of providingto provide pre-defined choices for an input field. Each choice is an option element, and a child of the datalist object. You’re probably familiar with the option element from years of building menus with select.

Associating a datalist object with a form field is simple. Add a list attribute to input element. Set the value of the list attribute to the value of the id attribute of the datalist element. You can see an example below (click the HTML tab).

Now: just because it’s available, doesn’t mean it works well in all browsers. It’s supported, yes. But the user interface and interaction isn’t consistent. Opera and Internet Explorer 10¹ display the list of options when the input field receives focus as shown in Figure 1.

Meanwhile, Chrome currently displays the list of options only after the value of the associated input field changes, as shown in Figure 2. In all three aforementioned browsers, the options displayed will be filtered as user input changes.

Firefox, on the other hand, is a special case. In my opinion, displays the worst behavior of all major browsers. Like Chrome, Firefox displays the list of options only after the value of the associated input changes. But its list filtering is … janky. Firefox will filter the list of options and match letters, regardless of case and their position in the string. Both “Accra, Ghana” and “Paris, France” are among the filtered datalist items displayed (Figure 3). Subsequent input will re-filter the list.

I should note here that Firefox 16 for Android works much like Opera and IE10 on desktop. Datalist options appear on focus.

What about Safari? Sorry kids. As of version 6.0.2, it’s not supported.

¹ Internet Explorer 10 for desktop supports this IE10 for mobile does not.