Nastya, photographed by Sean Archer

Located deep in Siberia, the village of Oymyakon holds the title of the coldest permanently inhabited place on Earth, tied with Verkhoyansk.

From December to February, the weather in the tiny village (population 500) plummets to -50°F (-45C), with a record low of -90°F (-68C) registered in 1933. At those temperatures, a naked human left outside would freeze to death in under a minute.

The extreme conditions are partly due to the fact that the hamlet lies between two large ranges that trap arctic air between them; it is actually significantly warmer on the mountains than in the valley below.

Surprisingly, summers in Oymyakon can be very mild, even hot; the town is also a growing tourist destination.

Hide captioned figure using:

Part of the CSS Positioning & Layering reading list

The prequel to this article – “Four Ways to Make Elements Disappear (And Reappear) Using CSS” – concentrated on classic techniques for hiding page elements; this one uses methods that work in modern browsers, with a few limitations for IE. It uses similar markup to the previous example:

<figure id="oymyakon">
	<img src="nastya.jpeg" alt>
	<figcaption>Nastya, photographed by Sean Archer</figcaption>
	</figure>
<p>Located deep in Siberia, the village of Oymyakon holds the title 
of the coldest permanently inhabited place on Earth, tied with Verkhoyansk.
<p>From December to February, the weather in the tiny village
(population 500) plummets to -50°F (-45C), with a record low of -90°F (-68C) 
registered in 1933. At those temperatures, a naked human left outside would 
freeze to death in under a minute…

Using this CSS: 

body {
	color: #fff;
	background: url(px.png) #333; 
	line-height: 1.4;
	font-size: 1.1rem;
}
figure#oymyakon {
	float: right; width: 50%;
	font-size: 0;
}
figure#oymyakon img { 
	width: 100%; height: auto;
	box-shadow: 0 0 12px rgba(0,0,0,.3);
}
figure#oymyakon figcaption {
	text-align: center;
	font-size: 1rem;
	font-style: italic;
	margin-top: 1rem;
}

In this article, I’m using different techniques to hide the <figure> element: you can test them using the interactive example above, or the linked CodePen.

Scaling an element to 0

figure#oymyakon { 
	transform: scale(0);
}

Obviously, making something infinitesimally small will make it disappear. It should be noted that the original area of the element will be retained, as transform effectively places an element into position: relative;

Resetting scale to 1 will make the element reappear; this transition can also be animated.

Cons: Supported in all modern browsers, but only IE9+. Can’t be applied to inline elements. Older browser versions will require vendor prefixes.

HTML5 hidden attribute

<figure id="oymyakon" hidden>

While it might have the same visual effect as display: none, this attribute records the state of an element:

“When specified on an element, hidden indicates that the element is not yet, or is no longer, directly relevant to the page’s current state.”

hidden is already in use for HTML5 elements like details. Unlike the other methods described here, the hidden attribute hides the element from all presentations, including print, mobile, and screen readers. Supported in all modern browsers, with one exception.

Cons: No support in IE, yet, although equality is easy to achieve in CSS with an attribute selector: 

[hidden] { display: none; }

Zero height and hidden overflow

figure#oymyakon { 
	height: 0; overflow: hidden;
}

A traditional solution. Effectively “collapses” the element vertically to make it disappear; works so long as the element has no visible border.  Do note that some space will likely be preserved for the hidden element on the page: while it has no height, the element still has a width and, potentially, a margin, which may continue to affect page layout.

Cons: Can’t be applied to inline elements. height values cannot be animated, although max-height can be.

Blur Filter

figure#oymyakon { 
	filter: blur(100px);
}

A very recent approach that won’t work in IE at all (at least at this time) blur is still an interesting possibility that should be considered for future applications. Sufficiently blurring an element makes it disappear entirely, while reducing the blur value to 0 brings the element “back into focus”.

Considerations:

  • blurring small text works better than images
  • blurred images may contribute a hint of color to the rest of the page, depending on their relative size and the blur value.
  • The higher the blur value, the more computational cycles are required to achieve it; sufficiently high values can seriously burden graphics processors, making this technique inadvisable for mobile devices right now.
  • Supported only recently in Firefox (although SVG can be used as a polyfill)
  • Still requires vendor prefixes for Chrome and Safari.
  • As stated, will not work at all in IE.

With these and the techniques discussed in the previous article, you have a complete range of tools for making elements appear and disappear on a web page. It’s important to understand that there is no one “right” or “best” technique: only the most appropriate tool for the job at hand. This also includes JavaScript, which has its own methods for adding and removing DOM elements.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/vEdVWg