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

И для всего документа, и внутри article, section etc. Вопрос общий и его закинут в temp.

У меня везде одинаково. Текст, поверх которого выводится текст input. Что уже удивительно — почему стартовый текст не исчезает, и почему не использовать placeholder?

Решение с упрощением jsfiddle.net/tpecazgn

html{
	height:100%;
	background: #f2f6f8;
	background: -webkit-linear-gradient(-45deg,  rgba(242,246,248,1), rgba(216,225,231,1) 19%, rgba(181,198,208,1) 51%, rgba(224,239,249,1));
	background: -moz-linear-gradient(-45deg,  rgba(242,246,248,1), rgba(216,225,231,1) 19%, rgba(181,198,208,1) 51%, rgba(224,239,249,1));
	background: -ms-linear-gradient(-45deg,  rgba(242,246,248,1), rgba(216,225,231,1) 19%, rgba(181,198,208,1) 51%, rgba(224,239,249,1));
	background: -o-linear-gradient(-45deg,  rgba(242,246,248,1), rgba(216,225,231,1) 19%, rgba(181,198,208,1) 51%, rgba(224,239,249,1));
	background: linear-gradient(-45deg,  rgba(242,246,248,1), rgba(216,225,231,1) 19%, rgba(181,198,208,1) 51%, rgba(224,239,249,1));
}

А вот это посмешило:

rgb(242,246,248); /* Old browsers */

Старые не поймут rgb().

Usability неразрывна связана с 3-мя вещами, лежащими в её определении:
— задача
— пользователь
— контекст

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

Вопрос в такой постановке не имеет ответа в принципе.
Размеры бывают разными. Например — внешние и внутренние отступы.
И откуда нам знать, что там с соседними блоками?

И вот на тему, почему не надо задавать в em то, что не нужно задавать в em:
Как исправить разные отступы у Chrome (с включенным DirectWrite API)?

Это правда.

Расчёт блоков, выпадающих из нормального потока, но при этом влияющих на последующие, очень сложен и способен серьёзно нагрузить старые браузеры, вплоть до подтормаживания и кратковременного подвисания. Современные с такой проблемой сталкиваются в меньшей степени, но также потратят немало времени на reflow. А ресурсы ой как ещё пригодятся на другие задачи.

Вот вам пример сложности расположения плавающих элементов.

Вёрстка с большим количеством плавающих блоков крайне зависима от совпадения их размеров, появления блоков с clearence, значения overflow у предков и ряда других факторов, что делает её применимой только в очень жёстко ограниченных условиях.

С появлением flex использовать нестабильные плавающие блоки для построения колонок становится неразумным решением. Тем более, что flex не поддерживается только IE9 и ниже. Ну уж а inline-block гарантированно работает везде.

Кстати, особенно смешно наблюдать использование float для построения горизонтальных лент с расчётом с помощью JS итоговой ширины. А вот для обтекания текстом плавающие блоки могут и должны использоваться. Стоп. Так они же для этого и были придуманы:)

Конечно можно codepen.io/cleric/pen/ktGfa

А у вас

.hero-trooper input[type=radio]:checked ~ .title .picker-on {
	display: block;
}

~ и + есть селекторы для siblings.

Потому, что при наведении грузится другая картинка. При первом наведении её ещё нет в кеше и на время загрузки ничего не видно. Так давно не делают.

Во-первых, есть спрайты и при наведении меняется лишь положение фона.
Во-вторых, такие кнопки уже реализуются с помощью CSS без избражений.

Как мы все прекрасно знаем, HTML5 не очень совместим со старыми браузерами.

Ну это весьма туманное и далеко не совсем верное утверждение.

Во-первых, нет чёткой грани между HTML5 и HTML4.
Во-вторых, понятие HTML5 настолько широко, что включает в себя очень много вещей, которые не поддерживаются и очень современными браузерами.

Так что ваш вопрос можно переформулировать так: «Какие браузеры поддерживают новые семантические элементы?»
Ответ: все, кроме упомянутого FF2 и IE8 и ниже. Первый вы ни у кого уже не встретите, для IE достаточно в скрипте создать (даже не добавляя в документ) элементы с такими именами тэгов, а в CSS прописать нужный для них display, и проблемы нет. Обратите внимание на поддержку элемента main (наводите курсор на версии браузеров).

Кстати, если вы решите разобраться с поддержкой появившихся полей формы и их атрибутов, новых API, да что там — простенького MathML, вы узнаете много интересного, и современные браузеры уже не будут казаться настолько уж современными:)

Почитайте про отправку файлов в HTML5 с помощью FormData или FileReader.

Для старых товарищей придётся в скрытый iframe. Не забываем про dragdrop в современных и невозможности type="file" multiple в старых.

В любом случае, файл (или файлы) уже отправлен(ы), и вторично отправлять содержание не нужно. В самой форме должны создаваться скрытые поля с полученными id, а поле type="file" банально удаляться.

Мне кажется, что найти готовый велосипед проще, чем самому писать.

Это — метка. Как case: или default:, использующиеся в switch.
Обычно в JS редко увидишь использование меток, поскольку единственная их цель — в случае нескольких вложенных циклов переходить из тела любого внутреннего цикла к отмеченному внешнему, невзирая на уровень вложенности.

Для этого используются инструкции break и continue, которые без метки работают непосредственно с тем циклом, в теле которого указаны. Если добавить метку, происходит прерывание (break) помеченного цикла либо переход к его блоку изменений (continue).

Там же написано:

useful for nested loops

Пример:

var stop = 7;

label:
for (var i = 10; i--;) {
	console.log('i:', i);
	for (var j = 10; j--;) {
		console.log('j:', j);
		if (j == stop) {
			console.log('stop');
			break label;
		}
	}
}
console.log('stopped');

Мне не очень нравится, когда постоянно выполняют траверс. Я бы нашёл один раз и сохранил. Второй плюс — искать можно не среди потомков, что может быть накладно, а среди предков, что всегда на порядки быстрее.

$(function(){
	var header = $('header'),
		main = $('main'),
		address = $('address');

	$(window).on('resize', function () {
		if ($(this).width() > 640) {
			if (!address.closest(header).length) {
				address.appendTo(header);
				console.log('Moving to header');
			}
		} else {
			if (!address.closest(main).length) {
				address.appendTo(main);
				console.log('Moving to main');
			}
		}
	}).resize();
});

Пы.Сы. Надеюсь, что в реальности у header и address есть опознавательные знаки:)

Не нужно приучаться ловить события методом регистрации обработчика в нём.
Для таких целей есть делегирование (использование 3-й фазы — всплытия)

$(document).on('click', селекторы, function (e) {
	$(this) // Где регистрировали (чьи селекторы)
	$(e.target) // Где реально произошло
});

Если интересно, вот небольшое обсуждение модели событий Как удалить обработчик событий установленный с пом...

Также, если смена hash произошла при клике, а всплытие события было остановлено, есть событие hashchange.

Ну а если кто-то балуется с History в сторонних скриптах, есть событие popstate.