Inline svg vs svg sprite?

Alibek Kulseitov, при спрайтах иконки вставляю юзом в html, поэтому "эффект с бликом" отпадает. В background-image можно менять цвет фильтром: medium или чтобы не было "блика" предзагрузить заранее второе изображение, т.к. браузер загружает его в момент наведения и из-за этого получается "блик".

Inline svg vs svg sprite?

Если хочешь анимировать на js, то только inline

— подойдут и object, embed, а в более редких случаях еще и iframe.

Inline svg vs svg sprite?

Управление с уровня CSS ограничено. Но на практике для смены состояния хватает менять opacity и цвет иконки (fill="currentColor", css-фильтры). Отдельными частями символа (имеющими свои CSS-классы) управлять нет возможности. Так как инлайновые стили (внутри svg) имеют более высокий приоритет, чем внешние стили, обычно сборщики спрайтов автоматически удаляют все инлайн fill, stroke. Что вы подразумеваете под «заменой картинки»?

Как сделать такой прямоугольник?

Норм способ, его можно немного лаконичней:

box-shadow: 5px -5px 0 5px rgba(67,204,244,.5), -5px 5px 0 5px rgba(67,204,244,.5);

Как сделать такой бордер?

В этом случае можно еще проще, через border-image-source: linear-gradient()
Пример
---
Кстати, спасибо за интересные хабра-посты про svg-магию.

Можно ли стилизовать picture?

Верно.

Можно ли стилизовать picture?

Да, из-за отсутствия поддержки.

Как правильно отобразить скролл?

campus1, если я вас правильно понимаю, вам надо сделать флекс-элемент sticky, но скролл внутри него должен быть относительно его контента, а не общего контента флекс-контейнера. Если да, то сделайте:

.left {
  width: 40%;
  overflow-y: scroll;
  position: sticky;
  top: 0;
  align-self: flex-start;
}

Как адаптивно выровнять контент в блоках одной высоты?

Пример: https://codepen.io/Odisseya/pen/OZovYV

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

Если стоит задача центровать лого относительно родителя (.logo_container), а не выделенного под лого доступного пространства (flex: 1 0 auto), то ваш способ не подходит, либо требует костыля. Т.к. при центровке лого должно учитываться пространство занятое гамбургером.

Нет графики @2x для ретин, имеет смысл интерполировать ее в Photoshop?

Froggyweb, на счет @2x устарело, это вы хватили лишнего — gs.statcounter.com/screen-resolution-stats/mobile/... Может у вас специфическая аудитория. Но по-сути, да, интерполяция в @2x в моем случае просто добавляет лишний вес.

Нет графики @2x для ретин, имеет смысл интерполировать ее в Photoshop?

Спасибо, за толковый ответ. Эмпирически, для @2x средний прирост веса +150%, а визуальный выигрыш даже с учетом пост-обработки оказался не слишком заметен.

Нет графики @2x для ретин, имеет смысл интерполировать ее в Photoshop?

sim3x, в psd растр для jpeg/webp.

Свойство box-sizing: border-box работает только для элементов с заданной шириной?

Senseich, со временем привыкаешь ) С border-box удобно, что при ширине в % ничего не вываливается. Кстати, у background-изображений есть немного схожие параметры: background-origin и background-clip.

Инструмент для авто-вставки в html WebP-версии изображения?

Спасибо, пробовала, но он вставляет лишь одну версию (не учитывая <source>и srcset'ы ), причем, не проверяя существование файла webp.

Как правильно использовать datalist и select?

Да, в общем случае. Если отправим что-то вроде:

<form action="#" method="post">
  <select name="sex">
    <option value="no">None</option>
    <option>Female</option>
    <option>Male</option>
  </select>
  <button>Go</button>
  </form>

В php получим, например:

array(1) {
  ["sex"]=> string(4) "Male"
}

Если будет выбран первый вариант, то в POST придет значение "no"

Валидация формы на клиенте: html5+js || js-велосипед || jQuery плагины?

Спасибо, дублировать серверную проверку вполне логичное решение.

Как в Sublime Text 3 сделать все ПРОПИСНЫЕ буквы строчными?

Вадим Соловьёв, :)
вот удобная шпаргалка nicothin.github.io/sublime-text/sublime-text-3-hot...

Как сверстать такой треугольник?

David Halkin, спасибо )))

Как сверстать такой треугольник?

В редакторе Inkscape (бесплатный) обвела контуром уголок по вашей картинке ;)