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

Пример

HTML

<form action="">
	<button type="button">Выбрать</button>
	<input name="f" type="file" multiple></input>
	<input name="t" type="text"></input>
</form>

CSS

[type="file"] {
	display: none;
}

JS

$(document)
	.on('click', '[type="button"]', function (e) {
		this.form.f.click();
	}).on('change', '[type="file"]', function (e) {
		if (this.files) {
			for (var i = 0, value = []; i < this.files.length; i++) {
				value.push(this.files[i].name);
			}

			value.join();
		} else {
			var value = this.value.replace(/^.+[\\\/]/, '');
		}

		this.form.t.value = value;
	});

По мотивам темы Как кроссбраузерно обрезать backround image средствами css?
Вот так можно перекрывать псевдоэлементами.
А вот так можно сделать нужные области «прозрачными» для операций в той же картой.
И, наконец, тени наружу, прямо как Пегий Дудочник.
Напоследок «матрёшка».
Вот и сказке конец, а кто слушал — молодец.

Не буду объяснять, что и к чему, хотя применять -webkit-animation, при этом записывая просто @keyframes — это epic fail... Вам едва ли нужно именно animation в данной ситуации. Достаточно простого transition.

А прыгало потому, что у вас один элемент при увеличении сдвигал другой. Раз уж взялись за трансформацию, то и следуйте ей — вместо изменения width ставьте scale().
Пример

Потому, что вы в обработчике события получаете в this ссылку на тот элемент, в котором обработчик был зарегистрирован.
Вам следует что называется «забиндить» обработчик на ваш объект.
Пример (вынес все методы в прототип, что есть правильно)

Вариант 1

this.Up = function () {
	...
}.bind(this);

this.Down = function () {
	...
}.bind(this);

Вариант 2

this.Render = function () {
	$(document)
		.on('click', '#counter-minus', this.Down.bind(this))
		.on('click', '#counter-plus', this.Up.bind(this));
}

Вариант с каррированием

function Counter(start){
	var xxx = this;
	//А тут везде внутри функций вместо this фтыкаем xxx
}

Последний вариант плох тем, что лишает возможности использовать прототип. Поэтому смотрите в сторону первых двух.

display:flex
Есть подводные камни в лице старых IE и Safari.

display:table
Есть подводные камни в лице Firefox и позиционирования в ячейках (если у вас такое есть).

float + :before | :after
Сами блоки (float, inline-block) разной высоты, но оба стоят в контейнере и визуально они одинаковы за счёт позиционируемых псевдоэлементов, в которых и реализован фон.

linear-gradient()
Если фон простой, то реализовать его можно в контейнере, в котором и лежат оба блока (float, inline-block).

В fonts.css у меня прописаны стили для шрифтов, а именно цвет, размер и сам шрифт. Разумеется все прописано для body.

Разумеется, это — плохо. Шрифт прописывается в html. Читайте про rem.
А по вопросу о нескольких файлах — любые селекторы могут встречаться в любых источниках. Это — одна из основ каскада (а то почему бы это называлось Cascading Style Sheets?).

Либо загружать в iframe на этой странице (атрибут target у ссылки и атрибут name с тем же значением у iframe).
Либо оставить ссылку такой, как она есть, и пусть документ, на который ведёт ссылка, откроется в этом же окне.

А кто будет учитывать padding и border?
Либо пропишите блоку с .col-md-7

.col-md-7 {
	box-sizing: border-box;
}

Ну, или всё по-взрослому. Находите значения paddingTop, paddingBottom, borderTopWidth, borderBottomWidth и вычитайте из полученной величины. Вот тогда можно и min-height оперировать.

Примерно так

По сути вы хотите Object Observe. Увы, но пока это ещё не стало реальностью.
Так что ИМХО придётся при изменения этого объекта вручную вызывать обновление таблицы. И, опять же, ИМХО это лучше делать с помощью сервисного слоя.

Захотелось сделать блок на фоне, чтобы между картинкой и описание тоже был просвет.
И, если бы не было старых IE, то можно было бы применять только градиенты.
Из-за них пришлось строить чуть более сложную схему, но и в IE8, пусть и с квадратными краями, но не страшно.

Конечно же, нет. Вы просто вызываете функцию и гарантируете, что в this при её выполнении будет ссылка на первый переданный параметр.
Сам по себе вызов любого метода — синхронный код. Будь это хоть setTimeout(), хоть new XMLHttpRequest().send().

Как грамотно стилизовать h1 средствами CSS?

Вы абсолютно верно задумались. Налицо необдуманное использование id для однотипных операций и игнорирование траверса.
Пример (вводить в крайние левые поля букву J)

Для Firefox никак. Только плагины типа jscrollpane, customscrollbar и другие, что легко находятся по словам custom scrollbars cross browser
Для IE всё, что нужно, найдёте на MSDN.

Используем отрицательный margin, волшебный :nth-child и магию цифр.

Спецификация только лишь описывает общий подход к атрибутам meta-тэгов и их обработке.
В ней же вы могли бы легко найти ссылки на PragmaExtensions (это к вопросу про X-UA-Compatible) и MetaExtensions (а это про og:image).
Что же касается x-rim-auto-match, то в списке зарегистрированных имён его нет. Видимо, BlackBerry решила не заморачиваться с регистрацией.