WapSter

Если верстал под десктоп то от большего к меньшему экрану должны быть в вашем случае, вот так -

*стили*

@media all and (max-width: 411px) and (max-height: 731px) {
   *стили*
}

@media all and (max-width: 360px) and (max-height: 640px) {
   *стили*
}

.
При mobilefirst наоборот

Медленнее сайт загружается. Вы загружаете один лишний css файл в котором прописано подключение шрифтов @fontface {}
upd: Бывает так, что в этом css прописаны @import для еще левых css

Конструкция с применением зависимости ~ работает, только на ниже лежащие блоки от селектора к которому применяете, в данном случае у вас это input

Нет, не может. Если css файл указан в ресурсах, то весь файл скачается.

Нужно подключить jQuery

<input type="file">

Относительным позиционированием с применением хитрого calc, внутрь сунуть слайдер, обёртке задать высоту фиксированную. В общем дофига танцев, но вполне реально.

@supports

Используйте препроцессор и разбивайте на файлы, на выходе будет один или несколько css в зависимости как настроить. Обычно используются ещё сборщики для объединения медиа запросов, и тогда их можно прописывать внутри блоков добавить к этому миксины и переменные, исходник становится более читаемым, а на выходе оптимизированный css.

Происходит запрос кода для соответствующего устройства

Первая же ссылка в Гугле shpargalkablog.ru/2014/02/no-link.html Неужели задать вопрос легче чем забить запрос в Гугле?

А почему бы не почитать хорошую документацию
UPD: touchDrag

.wrapper
   .left-bar
   .center
       .content
       .content
   .right-bar

можно примерно так

Плохо для некоторых элементов, а не всех. К примеру select, существует куча плагинов на js которые позволяют переопределить стиль, но во многих из них не реализована нативная поддержка селектов для различных устройств, мобильных в частности. Не говоря уже о поддержке скринридеров.

С кодом не помогу, но могу объяснить. transform: skewX(угол обрезки) для псевдоэлемента к примеру, для родителя оверфлоу хидден, ненужную часть псевдоэлемента скрыть за краем родителя.

Вот так?

Могу сделать предположение, space-around не дружит со свойством скролл и не видит границ от которых ему нужно отталкиваться. Думаю если сделать обертку вокруг заголовков которая будет скроллится и иметь определенную высоту, то ситуация исправиться. Но лучше убрать свойство justify content
UPD: Перенес

Привяжите @keyframe к классу и используйте свойство animation, а не transition

Псевдоэлемент на ссылке, с высотой 100% с шириной какую вам нужно, при Ховер увеличивать ширину
upd псевдоэлемент относительно позиционированный