Skip to content

Instantly share code, notes, and snippets.

@nikolai-shabalin
Last active April 29, 2020 15:01
Show Gist options
  • Save nikolai-shabalin/883cee7cca338ad2a9161da1c2d87187 to your computer and use it in GitHub Desktop.
Save nikolai-shabalin/883cee7cca338ad2a9161da1c2d87187 to your computer and use it in GitHub Desktop.
Вопросы к разделу «Адаптивная графика» на 19 потоке

Вопросы к разделу «Адаптивная графика»

Стили для элемента блока

Допускается ли указывать в стилях элемента block__el что-либо кроме внешней геометрии? Например, разрешено ли указывать высоту строк или цвет текста в этом классе-элементе?

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

Позиционирование фонов

Добрый день! Возник вопрос по поводу позиционирования фонов и их декоративного оформления.

У нас в проекте Погнали, есть блок с множественным наложением фонов. Свойство background-image прекрасно работает, фоны накладываются.. но! конкретно в этом месте тут идет темно синий прямоугольник с круглыми углами, который подложен под фоновую картинку с фотографией. Данного прямоугольника в svg картинках нет.

Логично предположить, что его можно добавить, через свойство background-image в виде градиента. Однако для фона в таком случае нельзя скруглить углы. Свойство border-radius работает с общим фоном самого блока. https://prnt.sc/rulqb2

Еще можно было бы сделать этот прямоугольник в виде псевдоэлемента. Тогда решается проблема с скруглением углов, но возникает другая. Псевдоэлемент невозможно подложить под фон.

Единственное решение, которое я нашла, это создать svg изображение самостоятельно... Возможен ли такой вариант? Не будет ли это противоречить каким либо правилам или критериям на защите.

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

Кстати, псевдоэлемент всё же можно подложить под фон с помощью z-index: -1 :)

.block {
    position: relative;
    width: 256px;
    height: 256px;
    background-color: tomato;
}

.block::before {
    position: absolute;
    bottom: -32px;
    right: -32px;
    z-index: -1;
    width: 64px;
    height: 64px;
    content: '';
    background-color: plum;
}
@alenavolkova97
Copy link

alenavolkova97 commented Apr 29, 2020

Добрый день, подскажите, пожалуйста, как правильно подключить 2 разные фавиконки к странице (16х16 и 32х32 - для ретины)?

link rel="apple-touch-icon-precomposed" sizes="16x16" href="icon-16x16.png"
link rel="apple-touch-icon-precomposed" sizes="32x32" href="icon-32x32.png"

Правильно ли подключить таким образом? Осталось непонятным, как браузер будет понимать, какую именно фавиконку использовать в конкретном случае, ведь при способе выше мы никак не "сообщаем" браузеру о том, что фавиконка 32х32px предназначается для ретины.

Спасибо!

@pepelsbey
Copy link

@alenashashko, вот так:

<link rel="icon" sizes="16x16" href="icon-16x16.png">
<link rel="icon" sizes="32x32" href="icon-32x32.png">

Иконка с rel="apple-touch-icon-precomposed" используется на устройствах Apple (отсюда и название) во время «установки» сайта на домашний экран в виде закладки.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment