CSS Design Special Kudos Award Winner

DevTools Challenger

Firefox Developer Edition 44 features Play/Pause Animations and Transitions, Rewind, a CSS Filter Editor, Timeline Scrubbing, a Cubic Bezier Editor, Animation Detection, Eyedropper, and Editable Keyframes.

Explore the deepest secrets of the ocean with some of Firefox Developer Edition 44’s newest tools, designed to take the pain out of CSS animation.

Your screen represents 200 meters of sea water. Only 5800 left to go.

“The deep sea is an inferior world. All we know of it is all there is to be known.” Pliny

Before scuba gear, humans weren’t able to dive deeper than the bottom of your browser. For millenia, people assumed that there was no life below 200 meters of the ocean, oblivious to a hidden world we could neither see nor touch.

Welcome to the Twilight Zone

Here in the mesophelagic zone, no photosynthesis happens; most of the sunlight has been filtered out already, starting with the longer wavelengths, the reds and oranges.

With no vegetation to graze upon, all the animals you are about to meet are either commuters, scavengers, or hunters.

“If we knew what was there we wouldn’t have to go.” Jacques Cousteau

Flashlight Fish

Often deep-sea critters like these tropical flashlight fish migrate vertically to shallower waters at night to look for food.

Flashlight fish have a bioluminescent pocket under each eye that they use to communicate with each other, disorient predators, and hunt. Rediscover how to play and pause animations.

Playing and Pausing Animations

This little flashlight fish is having trouble keeping up with the others. Use your browser’s developer tools to unpause its swimming animation so it can catch up.

  1. On the flashlight fish above, right-click “inspect element.”

  2. In the developer tools, navigate to the Animation tab.

  3. Press play rewind icon to start the fish’s swimming animation.

The Nautilus

There were once six families of Nautilaceae. But only one made it out of the Triassic Period. Here, 600 meters deep, modern descendants of these prehistoric molluscs still prowl. Other cephalopods like octopi have eight arms, but a nautilus can have 90 or so.

Nautili get around using jet propulsion. This couples with their buoyant, air-filled shells to give them their characteristic bobbing motion as they move through the water.

Nautili are long-lived for cephalopods, taking 15 years to reach sexual maturity. Yet their shells are popular as curiosities and jewelry, where they are made into bluish ‘Osmeña Pearls.’ Harvesting is unregulated and most likely unsustainable. This animal that outlived the dinosaurs is more likely to be driven to extinction by the whims of human fashion. Rediscover the cubic-bezier editor.

Editing Cubic-Beziers

This nautilus is moving a little too smoothly through the water. Use the cubic-bezier editor in your browser’s developer tools to adjust her movement to look more bouncy.

  1. On the nautilus, right-click “inspect element.”

  2. In the developer tools, click on the Rules tab.

  3. Find the nautilus’s animation-timing-function.

  4. Click the cubic-bezier editor icon next to linear to open the cubic-bezier editor.

  5. Optional: Play with the handles.

  6. Choose a curve with some bounce, like Backwards.

Humboldt Squid

The chromatophores on a Humboldt squid’s body fade from white to red too rapidly for the human eye to perceive. Scientists think the squid flash as a form of camouflage or to disorient their prey.

These squid can form huge shoals of over 1000 individuals. They take only a year to grow to full size, and that fast growth means a big appetite. Their coloration and aggressive feeding behavior have earned them the nickname “red devils” among Mexican fishermen.

Recently, this species has started spreading northward as far as the coast of Oregon in the United States. If the thought of armies of aggro squid invading your coastline keeps you up at night, take heart: although Humboldts do migrate toward the surface at night to hunt, you’re unlikely to ever encounter one. The upward limit of their migration, 130 meters below the surface, is well below the depth of unassisted divers.

Rediscover how to scrub the animation timeline.

Scrubbing the Animation Timeline

These Humboldt squid are on the hunt! When Humboldt squid feed, they rapidly flash light and dark.

But how are they changing colors so quickly? Scrub the Animation panel’s timeline to see what’s really going on.

  1. On one of the squid, right-click “inspect element.”

  2. In the developer tools, click on the Animations tab.

  3. Click and drag anywhere inside the timeline to scrub through the animation.

Now Entering: The Midnight Zone

“(A)dventuring under the sea is an unearthly experience, and in all except one sense we are actually entering a new world…” William Beebe, Half Mile Down

Darker than dark. Blacker than black. Even a moonless night sky has the stars, but at noon under a clear sky, not a single ray of sunlight can penetrate the darkness of the Bathypelagic Zone.

There is little oxygen. The temperature hovers near freezing. The weight of hundreds of pounds of water crushes down from above.

Yet life finds a way.

Half of all species of sharks live here, in the deep sea.

True story.

Orange Roughy

Orange roughy can be found in the blue-lit waters of the Twilight Zone, where red light is filtered out after traveling so far through the water. Only blue light is left. With no red light to reflect, red pigments look black, an effective camouflage against a backdrop of eternal darkness.

Many deep-sea fish have slow metabolisms, which make for a long life. Originally the orange roughy was thought to only live to about 20 years. The adults spawn in large groups over underwater mountain tops called seamounts. Catch quotas were set with the expectation that young fish would mature over 20 years to replace the caught fish. Fisheries trawled these breeding grounds repeatedly, hauling up hundreds of thousands of tons of spawning fish.

Rediscover the CSS filters editor.

Editing CSS Filters

Why is this orange roughy black? The fish is wearing a CSS filter that screens out all of its red hues, just like ocean water would. Edit the fish’s filters with your developer tools to see what it really looks like.

  1. On the fish, right-click “inspect element.”

  2. Navigate to the Rules tab.

  3. Find the orange roughy’s filter property.

  4. Click on the filter icon next to filter to explore other CSS filters.

  5. Click the x next to the custom filter to remove it.

  6. Optional: Try adding a greyscale filter. How do the two differ?

Then scientists discovered that the fish actually live to 150 years of age.

Orange roughy stocks around the world collapsed as catch rates exceeded the rate at which the fish could repopulate.

To this day the future of the orange roughy remains uncertain.

Matching Colors with the Eyedropper Tool

Light up the dark. Match the color of the dragonfish’s photophore below to the flashlight fish’s from earlier.

Many creatures of the deep create their own light, called bioluminesence, but it often requires special optics to pick up on film. To view this secret disco scene, use the eyedropper tool to “calibrate” your browser.

match these photophores specialized organs for producing light
  1. On the dragonfish’s photophore above, right-click “inspect element.”

  2. In the Rules panel, find the color property and click the color icon next to #436c6f to open the color picker.

  3. Click the eyedropper icon in the color picker.

  4. Click the flashlight fish’s photophore with the eyedropper to sample its color.

Biolumination

Sound is not the dominant communication method on this planet. More creatures use light to communicate than sound. The deep may be a quiet place acoustically, but it is lousy with light noise from everything from sparking plankton to glowing coral. Creatures here use their own light to communicate, hunt, mate, hide, and escape from one another.

They produce bioluminescence in three different ways:

  1. Harboring symbiotic bacteria.

  2. Manufacturing bioluminescent chemicals in their bodies.

  3. Eating bioluminescent creatures and using their chemicals.

Rediscover using the eyedropper tool.

For every 200 meters, the pressure increases by 20 atmospheres. Right now, we’re at about 320 atmospheres.

If you were to throw a styrofoam cup out right now, it would be crushed to the size of a thimble.

Good thing you’re behind this protective browser.

The average depth of the world’s oceans, 3700 meters, is right around here.

Makes you think.

Last stop: The Abyssal Zone

The Abyss covers over 50% of the planet’s surface.

Down here, there are no days, no nights, no seasons.

Even the most powerful storm above has no impact down here.

It is a huge land populated by Lilliputian creatures who will never know what the sun is. They could not fathom that the water that surrounds them as casually as the air surrounds us has a surface that can be broken.

These are the aliens on our planet.

And we know as little of them as they do of us.

The Vomiting Shrimp

The vomiting shrimp, Acanthephyra purpurea, uses a squirt of glowing goo to confuse and disarm would-be assailants. It might also attract other, larger predators to the scene. Clever.

Rediscover rewinding the animation timeline.

Rewinding the Animation Timeline

What was that? Some small, quick creature left behind a swirl of bioluminous fluid. Rewind the scene via the Animation panel to spot the culprit.

  1. On the glowing fluid above, right-click “inspect element.”

  2. Navigate to the Animations tab.

  3. Click rewind rewind icon to go back to the beginning of the timeline.

  4. Click play rewind icon to replay the transition.

The deep ocean isn’t barren.

But life does get exponentially harder to find.

Welcome to the Abyssal Plain

It is wide, flat, and coated in a thick, grey ooze. This ooze comes from what is colorfully referred to as “marine snow”: the leftovers that constantly float down from sunnier waters.

The pressure here is intense. Most abyssal creatures have flabby, gelatinous bodies that explode when brought to the surface. Few fish live here, and those that do are often very small and very efficient.

Hagfish

Hagfish are known as “slime eels” for the prolific amounts of slime they sling at their enemies. Scientists find them fascinating, not only for their ability to turn water into jelly but also because they haven’t changed much in 300 million years. They are the only animals alive today that have skulls but no spine. They also lack jaws, and their eyes are little more than photosensitive spots on their heads.

This hagfish has tied itself in a knot, a technique these ancient creatures use to shed slime and wriggle away to safety. No wonder it has so few marine predators!

Rediscover how to detect obscured animations.

Detecting Obscured Animations

Where’s the hagfish hiding? It’s moving around, hiding in the ooze. Use the Animation panel to detect its location and bring it to light.

  1. On the ocean floor, right-click “inspect element.”

  2. In the developer tools, open the Animation tab to see what elements are animating.

  3. Hover over the name of the element that is wriggling around to see where it is on the page.

  4. Click to select the animated element.

  5. With the hagfish selected, navigate to the Rules tab.

  6. Under Rules, change the hagfish’s bottom property to 150px to lift it up out of the ooze.