Как и обещал – тонкая доводка 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, согласитесь, не плохо.
Удачи Вам.