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

И для всего документа, и внутри 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().

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

И вот на тему, почему не надо задавать в 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" банально удаляться.

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

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

$(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 есть опознавательные знаки:)

1. Контейнер
display:table (inline-table) + max-width:100% + table-layout:fixed (если нужно уравнять ширину колонок)

2. Контейнер
display:inline-block + max-width:100% + font-size:0 + white-space:nowrap (чтобы колонки не прыгнули друг под друга без ширины)
Колонки
display:inline-block + vertical-align:top + font-size:1rem + width:50% (если нужно уравнять ширину колонок) + white-space:normal (если было установлено nowrap)
Можно и float при желании с clearence у потока или overflow у контейнера

3. Контейнер
float + max-width:100%
Колонки
float + width:50% (или другие цифры, не превышающие в сумме 100%)
Точно так же можно и display:inline-block с обнулением и возвратом размера шрифта

jsfiddle.net/petroveg/bnoqcp95

Проектирование — Balsamiq Mockups (ну и MS Word, куда же без него:)
Нарезка — Fireworks (Photoshop для коррекции полученных макетов)
Иконки — ArtIcons (не идеал, просто купил когда-то) или любой редактор для PNG + любой конвертер
SVG — Illustrator и Inskape
Пипетка (просто пипетка, а не комбайн) — EYE3 (вариантов масса)
Код — Sublime (посматриваю в сторону WebStorm), иногда Notepad++, иногда Excel для подготовки массивов данных
Локальный сервер — использовал из-за простоты установки Denwer, перехожу на Node.js
FTP клиент — Filezilla
Быстрая проверка на iPad, iPhone (iPod) — Electric Mobile Studio

Примерно так я и сделал тут codepen.io/cleric/pen/ktGfa

Варианты codepen.io/cleric/pen/ECsGK

Внутренняя тень нужного цвета

input:-webkit-autofill{
	box-shadow:inset 0 0 0 1000px #fff;
}