Евгений Петров

Технически можно было бы сделать так

Пример

background-image: repeating-linear-gradient(
	-45deg,
	transparent,
	transparent 29px,
	rgba(255, 255, 255, .5) 29px,
	rgba(255, 255, 255, .5) 30px
);

Однако, в webkit будет совсем не то, что ожидалось.
Судя по всему, это — баг движка (очередной — на заметку тем, кто по инерции говорит о багнутости Firefox).
Исправляется указанием размера картинки. Остаётся только учесть, что вы указываете размер не исходной, а уже трансформированной картинки. Так, при повороте на 45° размер картинки должен быть в √2 больше, чем исходный размер.

Пример

background-image: repeating-linear-gradient(
	-45deg,
	transparent,
	transparent 29px,
	rgba(255, 255, 255, .5) 29px,
	rgba(255, 255, 255, .5) 30px
);
background-size: 42px 42px;

И остаётся небольшой минус — небольшие разрывы или сдвиги при несовпадении (опять же в webkit), и избежать этого для такого поворота не получится.

Для исправления этих несовпадений можно использовать решение, хотя код при этом слегка вырастет. С другой стороны, ширина полос остаётся постоянной, а расстояние между ними управляется с помощью размера картинки (не забываем про соотношение сторон при трансформации).

Пример

background-image: repeating-linear-gradient(
	-45deg,
	transparent,
	transparent 25%,
	rgba(255, 255, 255, .5) 25%,
	rgba(255, 255, 255, .5) calc(25% + 1px),
	transparent calc(25% + 1px),
	transparent 75%, rgba(255, 255, 255, .5) 75%,
	rgba(255, 255, 255, .5) calc(75% + 1px),
	transparent calc(75% + 1px),
	transparent
);
background-size: 40px 40px;

Гугл легко ответил бы вам на этот вопрос.
jsfiddle.net/petroveg/ggcbw7kd/1

Как только вы установили элементу display:none, запускается рендеринг и его размеры становятся нулевыми.
Достаточно поменять порядок выражений jsfiddle.net/petroveg/fnwhfv8s/1

Можно ли использовать rem для отступов блока друг от друга

Зачем? Значение в rem нужно для гарантированного получение базового размера. Между тем текстовые блоки наследуют размер шрифта, и для этого используются проценты, em.

К примеру, задать тегу html размер шрифта в один пиксель и использовать rem - так можно или не нужно и почему?

Ну это за гранью добра и зла:) Указывая размер шрифт в :root (он же html), вы задаёте точку отсчёта для наследования body и всех остальных элементов. Для какой задачи вам вообще может потребоваться базовый размер в 1 пиксель?

Пример

$(document).on('keydown', '[contenteditable]', function (e) {
	if (e.keyCode == 13) {
		var node = document.createElement('br');

		e.preventDefault();

		try {
			var selection = window.getSelection(),
				range = selection.getRangeAt(0);

			range.deleteContents();
			range.collapse(false);
			range.insertNode(node);
			range.selectNode(node);
			range.collapse(false);
			selection.removeAllRanges();
			selection.addRange(range);
		} catch (z) {
			var range = document.selection.createRange();

			range.pasteHTML(node.outerHTML);
			range.select();
		}
	}
});

Toggle Mixed Content in Firefox
Вводим about:config в адресную строку.
Находим security.mixed_content.block_display_content, жмём правую клавишу и выбираем Переключить, если параметр установлен в false.

На клиенте
Записывать в cookie, localStorage. После проверки устанавливать атрибут disabled.
Ненадёжно — пользователь может зайти из другого браузера, с другого устройства.

На сервере
Хранить на сервере время прошлого нажатия для пользователя. При формировании страницы устанавливать при необходимости атрибут disabled.
Надёжно — всё определяется для авторизованного пользователя однозначно, независимо от устройства или браузера.

Самое верное решение — использовать flex.
Увы, сразу сделаю оговорку, даже в IE11 элементы не растягиваются по высоте контейнера с display:flex, если у того указана минимальная высота min-height:100%.
Решение с flex

HTML

<div class="container">
	<div class="header"></div>
	<div class="main">
		<div class="content">
			<div class="block"></div>
			<div class="block"></div>
			<div class="block"></div>
			<div class="block"></div>
			<div class="block"></div>
		</div>
		<div class="sidebar"></div>
	</div>
	<div class="footer"></div>
</div>

CSS

html {
	background: #f6f6f6;
}
body {
	margin: 0;
}
html,
body,
.container {
	height: 100%;
}
.container {
	position: relative;
	min-width: 600px;
}
.header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 80px;
	background: #9c6;
}
.main {
	display: flex;
	box-sizing: border-box;
	min-height: 100%;
	margin: 0 0 -120px;
	padding: 80px 0 120px;
}
.content {
	flex-grow: 1;
	background: #ccf;
}
.sidebar {
	flex-basis: 200px;
	background: #f99;
}
.footer {
	height: 120px;
	background: #69c;
}
.content:before,
.content:after {
	content: "";
	display: table;
}
.block {
	width: 150px;
	height: 100px;
	margin: 10px;
	background: #f96;
}

По причине бага в IE, или полном отсутствии поддержки flex, приходится городить огород «по-старинке» с float и фоном в :before.
Решение с использованием float

HTML

<div class="container">
	<div class="header"></div>
	<div class="main">
		<div class="content">
			<div class="block"></div>
			<div class="block"></div>
			<div class="block"></div>
			<div class="block"></div>
			<div class="block"></div>
		</div>
		<div class="sidebar"></div>
	</div>
	<div class="footer"></div>
</div>

CSS

html {
	background: #f6f6f6;
}
body {
	margin: 0;
}
html,
body,
.container {
	height: 100%;
}
.container {
	position: relative;
	min-width: 600px;
}
.header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 80px;
	background: #9c6;
}
.main {
	position: relative;
	box-sizing: border-box;
	min-height: 100%;
	margin: 0 0 -120px;
	padding: 80px 0 120px;
}
.main:after {
	content: "";
	display: block;
	clear: both;
}
.content {
	float: left;
	width: 100%;
	margin-right: -200px;
}
.sidebar {
	float: right;
	width: 200px;
}
.content:before,
.sidebar:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 80px;
	bottom: 120px;
}
.content:before {
	left: 0;
	right: 200px;
	background: #ccf;
}
.sidebar:before {
	right: 0;
	width: 200px;
	background: #f99;
}
.footer {
	clear: both;
	position: relative;
	height: 120px;
	background: #69c;
}
.block {
	width: 150px;
	height: 100px;
	margin: 10px;
	background: #f96;
}

Ленар Фаттахов приводил ссылку на хорошую статью.

Это реализуется с помощью CSS

h1:hover ~ img {
	transform: scale(1.1, 1.1);
}

И я умоляю — используйте классы. Полагаться на имя тэга — плохо, плохо, плохо.

Update:
Выясняется, что и структура другая, и наводиться нужно на иной элемент.
Вот этот jQuery.

Вариант с replace и регуляркой

$(function () {
	$('.cena').each(function () {
		$(this).text($(this).text().replace(/^\s*(\d+)(\d{3})\s*([а-я\.]+)?\s*$/, '$1 $2 $3'));
	});
});

В дополнение к прекрасному варианту с pointer-events, который предложил Роман, для IE10 и ниже возможен вариант:

body:after {
	content: "";
	position: fixed;
	z-index: 1; /*Раззудись, молодецкое плечо*/
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

Как только вы переписали содержание элемента, свойство parentNode любого ребёнка, ранее находившегося в этом блоке, будет равно null.
Пример

Если элемент вложен в удаляемую ветку дерева (потомок), то parentNode вернёт ссылку на родителя в удалённой ветке, и самый простой способ проверить его нахождение в DOM — использовать Node.contains() (вернёт false).
Пример

Если хочется отслеживать изменение элемента вообще, то решение есть тут Как отловить создание нового IFrame на странице?

Пример, который вы привели, относится больше к каррированию (каррингу).
Вы передали некое значение, которое получила в свой контекст внутренняя функция, которая и вернулась.

Замыкание ли это? Безусловно. Почитайте про лексический контекст у Ильи Кантора. Лексический контекст зависит от способа создания (FD, FE или вызов конструктора Function).

У каждой функции есть свой лексический контекст, и самым внешним контекстом является глобальный. Так что переменные и функции, объявленные в глобальном контексте, а также все свойства глобального объекта всегда попадают в замыкание любой функции, если переменные с такими именами не встречаются в цепочке внешних контекстов.

Closure — не паттерн, а реализация. К паттерну Singlton не имеет отношения.
Тык, пык.