club762.ru
Стилевые правила, на которые следует обратить свое внимание
Перед тем, как мы приступим к изучению важных стилевых правил, я хочу сделать небольшой экскурс в виды макетов: я объясню разницу между адаптивными и так называемыми «жидкими» макетами. В жидком макете содержимое веб-страницы будет растягиваться или сужаться в зависимости от ширины окна браузера и минимальной/максимальной ширины, заданной в стилевых таблицах.
Адаптивный макет идет еще дальше: элементы страницы могут изменять свои размеры, перемещаться в другие места, пропадать и заменяться другими элементами. Правила отображения могут связываться с размером или ориентацией браузера, типом и возможностями используемого устройства.
Для начала давайте поставим перед собой основные тезисы, которых мы будем придерживаться в работе:
- играться с внешним видом элементов страницы можно до бесконечности, это не несет в себе никакого риска для макета;
- стилевые свойства, влияющие на размеры, позиционирование или поведение контейнеров, необходимо использовать аккуратно;
- свойства, задающие фиксированные значения, должны использоваться лишь в самых редких случаях.
Вроде бы ничего сложного в этом нет. Отлично, идем дальше. Теперь давайте взглянем на суть каждого тезиса.
Безопасные стилевые свойства
Существует целая куча стилевых правил, которые можно использовать при необходимости в собственной стилевой таблице, не беспокоясь о том, что макет может съехать или разрушиться. В целом, любое стилевое правило, которое влияет только на внешний вид содержимого, является безопасным для макета.
К примеру, можно легко играться с установкой цветов или фонов для элементов, задавать их прозрачность и цвет рамок.
Все свойства, связанные с текстом, шрифтом, созданным контентом, могут также задаваться или меняться без опасений за целостность макета. Только убедитесь в том, что предложенный вами материал остается удобочитаемым в разных размерах браузера.
Другие свойства, которые можно использовать без страха и которые влияют на содержание:
- overflow;
- свойства «box-»;
- списки.
Свойства, которые могут вызвать проблемы
Теперь мы видим, что содержимое может быть стилизовано очень детально, даже если это адаптивная тема для WordPress. Проблемы могут поджидать нас при форматировании контента. Элементы, способные вызвать потенциальные проблемы:
- body
- div
- p
- span
- button
- article & aside
- ul & ol
- li
- table
Почему вообще эти элементы способны нарушить макет? Самый распространенный случай – присваивание фиксированной ширины разным элементам. В итоге эти элементы в разных размерах браузера просто выезжают за пределы макета. Также проблемы могут появиться в результате размещения одних плавающих (с позиционированием float) элементов в других плавающих элементах.
Другие проблемы могут возникнуть из-за некорректного задания свойств display или position.
Наконец, существует множество крутых эффектов CSS3, которые могут привести к потенциальным проблемам в процессе настройки адаптивных или статических тем для WordPress. Обратите также внимание на то, что указанные эффекты не поддерживаются браузером Internet Explorer.
Animation – позволяет задавать анимацию для HTML-элементов. Анимация будут отображаться всякий раз при просмотре элемента на веб-странице.
Transition – похожий на анимацию эффект, имеющий одно отличие: анимация включается только тогда, когда пользователь наводит на элемент курсор мыши. Данное свойство часто используется разработчиками WordPress, чтобы предложить пользователям большую интерактивность при работе с темой. В качестве примеров использования данного эффекта можно привести меню, различные навигационные элементы, кнопки с призывом к действию, масштабируемые области контента, подсветка контента и его потускнение и т.д.
Калькулятор, линейка и предусмотрительность
Как было отмечено выше, когда вы вносите изменения в адаптивную тему или переделываете статичную тему, очень важно не упустить фиксированные значения, заданные в пикселях. Вы должны понимать, что особенно проблематично применять фиксированные значения к контейнерным элементам. Вам понадобится много времени, чтобы подобрать значения для рамок, отступов и полей. Особенно остерегайтесь полей с отрицательными значениями!
Фиксированным пиксельным значениям есть хорошие альтернативы: проценты, em и rem. Мы не будем на них останавливаться, поскольку это скорее относится к CSS, нежели к WordPress.
Последний нюанс, который я хочу отметить: вам может понадобиться использовать определенные CSS-свойства или шорткоды плагинов для размещения контента в столбцах. Конечно, такой подход может быть оправданным в макетах с фиксированной шириной, и даже в некоторых жидких макетах, но в адаптивных макетах столбцы могут привести к проблемам. По моему мнению, столбцов, появившихся в CSS3, лучше всего избегать в адаптивных темах WordPress. Возможно, что сайт, разбитый на 3 или 4 столбца, будет неплохо смотреться на вашем ноутбуке. Но попробуйте загрузить его на свой iPhone… В данном случае комментарии излишни.
