Rustam Bainazarov

Дать однозначный ответ на данный вопрос невозможно. Всё зависит от проекта и его аудитории. К примеру, тот же VK поддерживает до сих пор IE8. Да, там работает только базовый функционал, но между тем. Или та же страница Google: она до сих пор работает на устройствах 20-летней давности с Netscape.

Обычный для меня список на конец 2018-го года: IE11, EDGE 12+, Chrome 49+, Firefox 50+, Android Chrome 50+, iOS Safari 10+, Desktop Safari 10+. В зависимости от проекта, он может как сужаться, так и расширяться.

Удобно? Хм…

Ну раз удобно, попробуйте использовать выданный ими код в реальном проекте — сразу всё поймёте :))

Почесать собственную спину с помощью мизинца на ноге — и то удобнее будет.

Представленный выше код, что называется, overkill.

Сам использую подобный, но с pointer-events: none; visibility: hidden; и без white-space и clip-свойств. Надо тоже их добавить, хорошая идея :))

Upd. Хотя вот так будет лютый overkill:

.is--visually-hidden {
	position: absolute !important;
	visibility: hidden !important;
	pointer-events: none !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(100%) !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	text-indent: -9999px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
	-ms-user-select: none !important;
	user-select: none !important;
}

Только что там с accessibility -- фиг его знает. Тут уже жду комментариев, если они будут.

Update. Если кто не понял, мой код -- это сборная солянка всего что только можно для прикола. Кода из картинки автора вопроса вполне достаточно.

Дополнительного ПО не нужно.

· можно просто напрямую скинуть ссылку на весь проект (пример), которая открывается в современных Chrome и Firefox (Safari ни разу не пробовал)
· можно настроить командный доступ для совместной работы
· можно экспортировать в JPG, PNG
· можно сделать экспорт файла проекта (.FIG)

Update: если дать ссылку, у верстальщика не будет возможности посмотреть свойства, цвета объектов, не будет возможности экспортировать иконки, картинки и т. д. Поэтому самый оптимальный вариант — совместная работа или файл (если дизайн не будет претерпевать дальнейших изменений).

Update. В 2021 году уже можно спокойно всё смотреть и т. д. без прав редактирования

Это называется высотой строки (свойство line-height).

Вы можете прописать высоту строки самостоятельно. В данном примере высота строки вычисляется автоматически на основе высоты шрифта. Высота строки шрифта обычно больше его реальной высоты. Сделано это для того, чтобы шрифт не слипался, если текст в две и более строки.

Более того, я не знаю, что у вас в макете и как это должно выглядеть, поэтому могу понять вас неверно. Но если я правильно понял, отступ сверху нужно задать у родительского блока с помощью padding, либо у этого h1 с помощью margin-top.

P. S. Описанный MaxKorz метод предназначен для нивелирования влияния высоты строки на верхний отступ текстового блока от границы родительского блока.

Типичные примеры использования:

JPG — фото, иллюстрации без прозрачности, где важны цвета, переходы, оттенки и т. п. В таком случае JPG выигрывает у других форматов в плане соотношения качество/цветность/размер. Так себе для контрастных схем и текстов.

PNG — фотографии, схемы, графические элементы с прозрачностью, всякие вылетающие за границы элементы, где относительно много цветов (фото людей, инопланетян и т. п.). При соотносимом с JPG размере файла, PNG содержит гораздо меньше цветов, а сравнимые с JPG по количеству цветов файлы PNG будут весить очень много (поэтому для фото используют JPG). Если дело доходит до схем и текстов, PNG предпочтительнее JPG в силу отсутствия артефактов на контрастных краях.

GIF — анимации. Ну тут вообще отдельная песня. Ему на смену пророчат APNG и MP4, но воз и ныне там.

SVG — иконки, иллюстрации. Поддерживает прозрачность, бесконечно тянется. Обычно те же иконки в SVG весят меньше, чем в PNG при одинаковом фактическом размере использования. Можно анимировать (отдельная тема и куча особенностей) и управлять с помощью CSS и JS, если встраивать inline (можно и через #use, но с ограничениями). Наверное, самый чувствительный к ошибкам формат, потому что состоит из кода: сложный SVG-файл может убить производительность. Можно очень легко зашить вредоносный код, поэтому запрещён в вёрстке писем.

P. S. Я не могу описать все случаи, бывают уникальные, так как процесс выбора формата зависит от контента вашего изображения. В каждом конкретном нетипичном случае — думайте сами. К примеру, если векторная иллюстрация весит много, то есть смысл перевести её в JPG или PNG. Иногда SVG-иконка может весить в разы больше её PNG-аналога (при одинаковом фактическом размере использования, например, 100 на 100 пикселей при 1:1 размере viewport к физическому разрешению экрана) — тут многое зависит от методов и качества создания таких иконок. Как правильно отметил @Adamosу, иногда затраты на рендеринг SVG (на стороне клиента) не окупают его преимуществ, и приходится использовать растровые изображения. Ну и т. д… Особенностей использования форматов — куча.

P. P. S. Почитайте о Retina, ибо нет никакого «для ретины следует юзать JPG».

Если вы делаете безо всякого фреймворка, у вас нет админки, где можно такие блоки создать и на выходе нужные стили будут проставляться хоть inline, хоть через какой-нибудь data-атрибут для JS… то, конечно, либо через классы к каждому блоку, либо через nth-child, либо через inline CSS.

Используя inline-метод без фреймворка, учитывайте вероятные трудности с разработкой адаптивности в случае, если нужно будет двигать фон/менять габариты и т. д.

Я такие блоки делал так: img (+ lazyload, формат JPG) и inline-стиль цвета фона обёртки, чтобы не было пустых областей ни при каких обстоятельствах. Всё это дело обрабатывалось в админке и выводилось на сайте. Можно было использовать background-image спокойно, это уже не так важно.

Если будете делать такой же гибрид (CSS-цвет + JPG с фоном), будьте аккуратны, у JPG могут быть артефакты сжатия из-за которых цвет фона может быть неоднородным, и на стыках может быть разница между картинкой и фоновым CSS-цветом. PNG предпочтительнее в данном плане, но у него есть недостаток в плане размера.

Эм, ну как — как? Чтобы сверстать некий «любой анимированный элемент» нужно его… сверстать.

Да-да, вы не ослушались, его нужно сверстать — т. е. воспользоваться HTML, CSS, JS и, если нужно, canvas.

Ну а рассказывать обо всём диапазоне технологий и их практическом применении, во-первых, никто не сможет, а во-вторых, никто не будет. У вас слишком общий вопрос.

Советую брать в основу десктопного макета разрешение типичного ноутбука (1360px) + вычитать полосу прокрутки (16–17px). В любом случае учитывать полосу прокрутки нужно обязательно, чтобы избежать проблем.

А ещё лучше, чтобы ваш макет умещался в рамках ~1320px, потому что некоторые шрифты на разных ОС и в разных браузерах могут иметь различный размер значений межбуквенного расстояния. К примеру, такая шняга есть у шрифта Circe: MacOS рендерит с большим межбуквенным расстоянием, чем Windows (и это в рамках одного браузера — Chrome).

P. S. Почему за основу именно типичный ноутбук? Потому что большинство больших мониторов имеет оное разрешение, в т. ч. куча недорогих мониторов по 22 дюйма и подобные им. Лучше, конечно, продумать макеты и на разрешения выше (к примеру, 1360–1600, 1601–1920, 1921–2560). Ну и так далее. Всё зависит от дизайна.

LOL (!!!), у вас сайт весит 39 Мб (!!!), 130 запросов, PNG-картинки по 3 Мб, фото для фона весит 4,5 Мб... а вы спрашивайте, почему у вас сайт грузится так плохо. Ясен пень, что у вас все пустое (белый шрифт на белом фоне), пока не прогрузится хотя бы фоновый рисунок.

CSS и DOM у вас прогружаются совершенно нормально, у вас тут проблемы посерьёзнее :))

Для начала включите на сервере GZIP-сжатие, а также уменьшите картинки по габаритам в Photoshop и прогоните их всех хотя бы через это: https://tinypng.com.

Это чуть-чуть облегчит сей ад (наверное, LOL), но я уже не берусь изучать все остальные технические аспекты данного сайта... Я такого давно не видел.

https://tools.pingdom.com/#59e8fb75ecc00000

Типичная задача.

Для родителя:
display: flex;
flex-flow: column wrap; (чтобы в колонку)
justify-content: space-between; (распределяет дочерние элементы равномерно в рамках родительского блока)

А для детей нужно подбирать параметры свойств flex-grow, flex-shrink и flex-basis (например, flex: 1 0;), чтобы нужные элементы росли по высоте, заполняя пространство, а нижний элемент с ценой — нет.

Пришлите код, иначе будет сложно сказать, что куда подставить. Возможно, нужно будет разметку менять. Скорее всего, flexbox так же будет необходим на всём блоке, чтобы колонки с текстом и фото были равны по высоте.

https://jsfiddle.net/w1pzu5rh/1/.
Зоны выделил разными цветами. Верстка на коленке, но алгоритм будет понятен. Под реальности проекта нужно, конечно, подстроить (ту же минимальную высоту поставить блоку, если нужно, реальные размеры, верстку и т. п.).

GreenSock (GSAP).

Примеры:
https://greensock.com/examples-showcases?product_i...

Но это, конечно, не совсем плагин :))

P. S. Не слушайте про ненужность анимаций на сайте. Просто надо знать им меру и делать те анимации, которые бы помогали дизайну/навигации, помогали бы пользователю с пониманием процессов на сайте (удаление элементов, добавление в корзину, схлопываение блоков и т. п.).

1. Есть старый jQuery-плагин, но работает он хорошо:
https://hernansartorio.com/jquery-nice-select/

2. Наверное, самый популярный; тоже для jQuery:
https://select2.org/appearance

3. Есть такой, он без зависимостей:
https://joshuajohnson.co.uk/Choices/