
Как и обещал – тонкая доводка css под различные браузеры и курс “похудения” для кода.
Не знаю, кто как, а у меня весь процесс обучения идёт преимущественно на своих ошибках. Так, например выяснилась “особенность” Opera-ы корёжить <div>, оформление шапки с использованием CSS “display: block” или различие в отступах “margin” и “padding” у Opera и IE…
А, уж, про масштабирование текста в em-единицах, можно целую поэму сложить. Как правило, в ущерб величине кода, ОБЯЗАТЕЛЬНО надо прописывать “margin” и “padding” для основных элементов оформления. Это сведет к минимуму разночтения Вашего кода в разных браузерах.
Уменьшение размеров файла CSS достигается:
- написанием коротких правил,
- группировкой свойств похожих классов и ID,
- разнесением свойств элемента по подобиям
Давайте рассмотрим все три метода по порядку, но перед этим выполним базовую оптимизацию, чтобы не плавать в коде:
- В файле CSS элементы упорядочиваем сначала по виду: основные теги, ID и классы; а затем в этих трёх списках – по алфавиту.
- Стандартное многострочное форматирование нужно свести в одну строку, а после последнего описания – убрать точку с запятой.
Справились? Отлично! А теперь по пунктам:
1.Написание коротких правил CSS:
Правила вида:
“margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px;”
можно и нужно преобразовать к виду
“margin: 0;”
или, если где-то есть отступ отличный от остальных – используем
“margin: 0px 3px 3px 10px;”
,где направление обхода по часовой стрелке: верх – справа – низ – слева.
Такой же принцип для “padding”, “border”, “border-style”, “border-width” и “border-color”.
Цвета вида #AACCFF вполне корректно читаются в записи #ACF, поэтому, там где использована основная палитра (Web-Safe) их заменяют сокращённой записью.
Именованные цвета замените на hex-код, потому, что большинство имён длиннее семи символов. (Сравните длину #b8860b и darkgoldenrod)
2.Группировка свойств похожих классов и ID
Вместо записи:
.video {max-width: 100%; height: auto}
object {max-width: 100%; height: auto}
примените:
.video, object{max-width: 100%;height: auto}
3.Разнесение свойств элемента по подобиям
Допустим у нас есть код:
ul.tab{padding:1em}
#my-cath{ width:160px; display:none}
#comment{ display:none; padding:1em; width:160px }
Очевидно, что можно тот же код записать на строку короче:
ul.tab, #comment {padding:1em}
#my-cath, #comment { width:160px; display:none}
В результате таких манипуляций наш скин станет меньше килобайт на 5–10, что, при общем коде страницы в 15–30Кb, согласитесь, не плохо.
Удачи Вам.
Читайте в этой серии:
Скин для WP своими руками (Вводная часть)
Скин для WP своими руками (header.php)
Скин для WP своими руками (footer.php)
Скин для WP своими руками (sidebar.php)
Скин для WP своими руками (comments-popup.php)
Скин для WP своими руками (search.php)
Скин для WP своими руками (оставшиеся мелочи.php)
Скин для WP своими руками. (Вводная в дизайн)
Скин для WP своими руками. (css — финальный аккорд)
Тема для WordPress — иерархия
Тема для WordPress — CSS
Тема для WordPress — функции
Тема для WordPress – цикл