Сохраняйте соотношение сторон вашего сайта (полимер внутри)
Одна из вещей, которые я больше всего ненавижу во время блуждания по сети, - это заходить на веб-сайты с раздражающим потоком контента. Вы можете обнаружить, что читаете текст, и через несколько секунд он уже исчез, потому что изображение только что загрузилось и переместило все содержимое вниз. Чтобы наши пользователи были довольны, мы должны обеспечить максимальное удобство использования, и я хочу поделиться с вами небольшим советом, который поможет вам на один шаг ближе к нему.
Иногда при асинхронной загрузке содержимого вы заранее знаете размер содержимого или, лучше сказать, соотношение сторон (например, изображения, встроенное содержимое), поэтому вы можете поместить это содержимое в контейнер (простой div) и соответственно установить его размер. Таким образом, контейнер уже будет удерживать место для своего дочернего элемента и не позволит содержимому растекаться повсюду. В большинстве случаев вы хотели бы установить ширину в процентных единицах, поэтому может быть сложно установить соотношение сторон содержимого с помощью чистого CSS. Чтобы решить эту проблему, позвольте мне рассказать вам кое-что о браузерах (сначала это может показаться нелогичным, но подождите…): отступы и поля (как по вертикали, так и по горизонтали) рассчитываются по ширине элемента Только! Это означает, что если мы установим следующий css для элемента width: 100px; padding-top: 20%. В результате padding-top будет равно 20px. Теперь, когда мы знаем, как работают браузеры, мы можем использовать это для нашей же пользы. Установите padding-top псевдоэлемента :before контейнера в соответствии с соотношением сторон (например, для набора содержимого 16: 9 padding-top: 56.25%) и установите для дочернего position значение absolute вместе с top: 0; left: 0; width: 100%; height: 100%. Таким образом мы получаем контент идеального размера, который не будет вызывать поток контента даже при асинхронной загрузке.
Вот ссылка на код с демонстрацией этой техники https://codepen.io/idoshamun/pen/PGxNKr
Если вы, как и я, любитель полимеров, вам будет несложно реализовать это в своем проекте с помощью нашего tem-container веб-компонента.
Загляните на страницу GitHub и демо!
Спасибо за внимание! Если вам это понравилось, порекомендуйте его, чтобы другие тоже получили удовольствие, нажав кнопку в форме сердца.
Не стесняйтесь обращаться ко мне в Twitter, Linkedin и здесь, на Medium.
