Если вы начинающий верстальщик, то эта шпаргалка поможет вам ориентироваться в этом непростом и местами запутанном мире.
Первый вопрос, который возникает у любого true-верстальщика — это как построить скелет сайта так, чтобы он работал во всех браузеров без бесконечной переделки. И мы не исключение :).
Для начала необходимо определиться, какие браузеры мы хотим поддерживать поддерживать. В современном мире верстки бытует мнение, что поддерживать старые браузеры — не модно. И я оставлю адептов моды при их мнении.
Если вы возьмете топ-компании наподобие Яндекса, то увидите, что их главная страница готова валидно открыться даже на ie5, которому — на минуточку — уже более 20 лет! Это говорит о том, что если вы разрабатываете солидный сайт, который будет рассчитан на все слои населения, то одним из приоритетов должно стать поддержка как можно бОльшего спектра браузеров… Однако мы не будем бросаться в такие крайности. Всегда стоит исходить не из амбиций, но и целесообразности. Вряд ли вы собираетесь запустить второй яндекс. Но тем не менее поддержка браузеров, которые помнит нынешнее поколение, еще, вероятно, нуждаются в вашей поддержке:
- Если ваш сайт нуждается в поддержке IE8+, то для верстки нужно использовать
%иemтам, где это возможно. И только для минорных элементов —px. Для горизонтальных меню и колонок использовать элементы сdisplay: inline-block. Если по каким-то причинам `inline`-блоки не справляются, для создания скелета можно использовать абсолютное позиционирование, но с оглядкой на transform.
- Для IE9+ появилась возможность использовать специальный метод
calc, позволяющий смешивать несколько единиц измерения, а так жеvh/vm,rem. И для создания скелета лучшеcalcна данном этапе придумать сложно. Преимущество vh/vw над % в том, что % не может быть применен к элементу, родитель которого, не имеет фиксированной высоты или ширины, а `vh/vw` — может. Аremпозволяет не обращать внимание на переопределение размера шрифта внутри элементов и верстать всю страницу в едином стиле. Использование единиц внутри calc —vh/vw,remи единицы из предыдущего пункта.
- Для IE10+ появились такая хорошая вещь, как flex. Теперь для позиционирования горизонтальных меню можно забыть об
inline-block.Flexво многом упрощает верстку, так вертикальное выравнивание внутри элементов. Поэтому там, где это возможно, лучше использовать именно его. Если нет, см. предыдущие пункты.
На этом краткий ликбез закончен. Смотрите примеры на нашем codepen.io.
от