Возможно ли объединить СSS и Html?

Там less, но сути это не меняет.
Хотя, если человек задает такой вопрос, ему по видимому нужно "на пальцах" объяснять, как и где на какую иконку кликнуть, как увидеть скомпилированный css, как его скопировать, где в html поставить теги и и куда между ними вставить полученный css.
А ты - sass. Это ж его в ступор на полдня вгонит, искать sass если его там нет..

Как сделать адаптивный фон сайта?

Вы как себе представляете? т.е. чего именно вы хотите? Картинка горизонтальная, с определенным соотношением сторон. Как бы на телефоне в вертикальном модусе она может быть или частично, или так как сказал @Рустам Байназаров, или растягвайте на 100% по высоте и не удивляйтесь что люди получились такие удивительно длинные ))) ну или нарезайте разные картинки для разных разрешений.

Как правильнее принудительно установить координаты элементов на экране?

я это вижу, попробую объяснить понятнее, в чем тут проблема.
Если я скажем за координату по вертикали беру координату любого из крайних табов, то у меня есть 2 возможности - сделать эту координату независимой от скроллинга, или постоянно отслеживать скроллинг и в нужный момент - при клике - использовать текущую координату.
Первый вариант -

var tab = document.getElementById('tab-label-description');
var position = tab.getBoundingClientRect();
var topPosition = position.top;

- по понятным причинам не подходит, т.к. контент все таки будет скроллиться, и табы могут быть ближе к верху страницы, ближе к низу или посередине, поэтму при таком подходе при каждом клике страница будет возращаться всегда на одну и ту же позицию, т.е. скачки будут постоянно, пусть не за пределы страницы, но тоже не комильфо.
Если же я постоянно отслеживаю координату - например-

var tabs = document.querySelectorAll('#tab-label-description, #tab-label-additional, #tab-label-productattach');
  function noScroll() {
  var tab = document.getElementById('tab-label-description');
  var position = tab.getBoundingClientRect();
  var topPosition = position.top;
  //alert('top: ' + topPosition + ' ');
   window.scrollTo({ top: topPosition});
  }

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

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

Почему при переключении табов происходит скачок вверх и как от этого избавиться?

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

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

Почему прыгают буквы?

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

а если серьезно, то где что, на каком сайте какие буквы? или тут ясновидящие все?

Как сделать анимацию по линиям для SVG?

себя обрисовал? )
неплохо получилось, я даже думаю, stroke-dashoffset анимация тут лишняя - хотя конечно дело вкуса )
Я бы из кусочков целое собирал, есть где развернуться в плане креатива.
Например, хотя бы как тут, но можно и что то другое придумать.

Как грамонтее скрыть сообщение после таймаута?

В общем, на живой magento наблюдается следующая ситуация.
При первом клике сообщение не скрывается - Cannot read property 'remove' of null
Т.е. как будто он не успевает увидить вот этот элемент - document.querySelector("div[role='alert']");
Второй клик отрабатывает как положено, скрывает, но уже по третьему и следующим кликам не выводит сообщение вообще...
ps. Сейчас сделал все таки вместо remove() целиком только удаление внутреннего содержимого - innerHMML = "" - все последующие клики кроме самого первого отрабатывают нормально.
Осталось только первое добавленное сообщение чтобы удалялось и вроде все ))

Как грамонтее скрыть сообщение после таймаута?

да, примерно так - спасибо.
Это стандатное поведение оповещений в magento2, например, при добавлении товара в корзину.
Там по клике на кнопку "add to cart" помимо всей прочей php js и ajax логики выводит такое оповещение, которое почему то не скрывается. Поэтому искать встроенный обработчик и что то в нем менять ну его...
Вроде все получается - сейчас протестирую уже непосредственно на magento.
Единственное, хотелось бы добавить плавности при скрытии, пока сделал на css, так как мне так привычнее, да и вообще неясно, можно ли сделать на ванильном js проще - вроде это уже прерогатива animation.delay...

Есть ли полноценный эмулятор браузера safari для Windows?

этот вариант рассматривается тоже, но правда не знаю, как будет с производительностью:
рабочая машина под вин7 с 8 гб памяти. Предполагаю, что будет не очень комфортно.

Есть ли полноценный эмулятор браузера safari для Windows?

не нашел, там в любой платной подписке доступна эта функция? Просто в триале вообще safari не доступен...

Как называется такой эффект у слайдера и есть ли плагины для него в WordPress?

ну тогда действительно owl-carousel, мышкой слайды там сменяются без проблем.

Как бороться с кашей в голове на работе?

Space Purr, а если бы он вообще не бухал, посоветовал бы ему начать? ))))
Типа что то

Как подключить растровую графику из SVG спрайта в HTML?

alexeeey_kuznetsov,
c нормальными svg таких проблем нет вообще - посмотрите, несколько примеров в одном для svg спрайтов.

Как подключить растровую графику из SVG спрайта в HTML?

alexeeey_kuznetsov,
ну так я и говорю - иконки в png, завернуты в svg. Я честно не понимаю, для чего они это делают?
Если вас устраивает такой вариант, делайте. Там разница почему то в том, что для svg и png источника viewBox="0 0 20 11" отображается по разному.
Вывести эти иконки вы выведете, только цвет менять на лету не сможете. Т.е. если нужны иконки разного цвета, а они скорее всего нужны, например, для hover , то придется делать дубли со всеми необходимыми цветами. Таким образом, вообще весть основной смысл svg спрайтов нивелируется...

Почему при переключении табов происходит скачок вверх и как от этого избавиться?

хм.. сейчас вот посмотрел темы от м2 коммерческие, в которых bootstrap встроен, так там несмотря на него такого поведения не наблюдается. CSS я посмотрел ничего вроде такого именно тут не добавляет, на всякий случай css bootstrap-овские отключил, ничего не изменилось.
Но вполне возможно что вы правы, если дело в обработке событий именно в js файлах bs- посмотрю, отпишусь.
А вообще интересно, где обработка этого события прописана и можно ли ее без удаления bs переписать, и если да то как?
пс. коллеги подключили bootstrap вместе с модулем от venustheme - точнее сказать с visual page builder-ом.
Этот билдер нужен для контент персонала, народ каждый день клепает лендинг страницы для sea, кодом они не смогут, так что скорее всего удалить bootstrap не дадут...

Почему при переключении табов происходит скачок вверх и как от этого избавиться?

я это вижу, так ведь и надо, например, чтобы по href="#additional" открывалось бы именно нужное содержимое. Если я его изменю, он же не откроется....И повторюсь, что стандартно с табами вроде бы так не происходит.

Возможно ли конвертировать формат ai или eps в psd с сохранением слоев?

BuBux,

в илюстраторе и так каждый объет это отдельный слой

это не так, в иллюстраторе есть слои, но то что выглядит для вас как привычные слои в фотошопе это path-ы, пути то есть или контуры, как правило они все находятся на одном слое. Впрочем, важнее то, что вы усложняете задачу.
Под ваши условия я вижу только один выход: копировать пути в иллюстраторе и по отдельност вставлять в шоп - каждый векторный смарт объект будет автоматически создан на новом слое. Недостатки такого подхода - кроме всех прочих минусах растра когда есть вектор - если слоев куева туча, запаришься все копировать и центрировать в шопе.

Рекомендации по логодизайну. Как сделать логотип лучше?

так покажите что получилось, а то чего дополнять то..

PNG, JPG или SVG: что использовать?

Adamos, вообще то уже год как минимум гугл учитывает скорость - или я что то пропустил и они это уже отменили?
А так да, если вам гугл неважен, то и вопросов нет.

Как реализованные такие переходы?

ⓒⓢⓢ,
да работает отлично, спасибо )