Хитрости CSS

Каскадные таблицы стилей или CSS - это мощный и удобный инструмент веб дизайнера. Он помогает создавать уникальные, красивые и динамичные HTML страницы легко и быстро. Но при неправильном использовании CSS может серьезно осложнить жизнь веб мастеру.

Следуя советам, изложенным в этой статье вы можете правильно использовать возможности CSS. В статье не приводится описания CSS свойств, иначе статья получилась бы очень длинной. Если вы хотите узнать, что означает или как используется то или иное свойство, то спросите, например, у Google.

Советы по использованию CSS

• Перед тем как начать создание сайта, сбросьте настройки браузеров по-умолчанию
  Данный совет касается того, что в различных браузерах, значения различных CSS свойств по-умолчанию - различаются. Это приводит к тому, что сайт выглядит по разному в различных браузерах.
  Как минимум рекомендуют устанавливать в 0, настройки для свойств padding и margin.
  Это можно сделать например вот так:
  * {margin:0px;padding:0px;}
  Так же неплохо задавать размер шрифта для всей страницы. Например, в Опере размер шрифта по-умолчанию намного меньше, чем в FireFox или IE.
  Данный совет может сберечь очень много времени при разработке качественного кросс-браузерного сайта.
• Создайте свою библиотеку CSS правил.
  Так как для элемента возможно задание нескольких классов, то можно создать библиотеку классов, которые отвечают за конкретное свойство. Выглядеть это может вот так: .width100 { width: 100%; }
  .width50 { width: 50%; }
  .floatLeft { float: left; }
  .floatRight { float: right; }
  .alignLeft { text-align: left; }
  .alignRight { text-align: right; }
  Тогда что бы создать div шириной 50% с левым выравниванием, надо написать вот так:
  <div class="width50 alignLeft"></div>
• Разделяйте свой CSS файл на смысловые секции
  Можно сделать, например, секции: Глобальные, Навигация, Заголовок, и т.д. Выделяйте секции комментариями, что бы их можно было легко найти в файле. Например: /*-----------------------------------*/
  /*----------->>> Меню <<<------------*/
  /*-----------------------------------*/
  
• Внутри каждой секции (смотри предыдущий совет) все стили перечисляйте в алфавитном порядке.
  Таким образом, вам будет намного легче искать стили по CSS файлу, особенно если файл большой.
• Используйте как можно меньше недокументированных возможностей.
  В сети Интернет постоянно появляются новые публикации, как можно заставить некоторые браузеры пропускать (или наоборот понимать) определенным образом сформированное CSS правило. Старайтесь избегать применения таких уловок. Применяйте их только если это хорошо задокументированный баг конкретного браузера и если вы уверены, что в дальнейшем (в будущих версиях браузеров) не будет проблем (если уловка не нарушает стандарт CSS).
• Называйте классы и id правильно.
  Давайте классам и id имена по их назначению, а не положению на странице. Иначе может получиться так, что вы назовете класс right_col, а затем перенесете данную колонку влево. Получится, что название класса не будет соответствовать действительности и, более того, будет вводить в заблуждение. Лучше назвать нейтрально: sidebar1, sidebar2, image_logo.
• Используйте сокращенную нотацию.
  CSS позволяет использовать сокращенную нотацию для некоторых элементов. Это достаточно удобно. Плюс очень сильно сокращает размер CSS кода. Сокращать можно следующие элементы:

  • Цвета элементов
    В качестве значения для цвета можно использовать сокращенную версию шестнадцатеричного RBG кода. То есть можно задавать цвет как .header{color:#359;}, что будет эквивалентно .header{color:#335599;}, но занимает на 3 байта меньше.
  • Значения для margin и padding
    Все отступы можно определить в одной строке. Это делается так: /*margin: <top> <right> <bottom> <left>;
    margin: <сверху> <справа> <снизу> <слева>;*/
    margin: 1px 1px 10px 20px;
    /*padding: <top> <right> <bottom> <left>;
    padding: <сверху> <справа> <снизу> <слева>;*/
    padding: 10px 2px 0px 0px;
    Отступы перечисляются по часовой стрелке, начиная сверху. Довольно легко запомнить.
  • Стиль границы элемента
    Стиль границы элемента можно так же указывать в одной строке: /*border: <width> <style> <color>;
    border: <толщина> <стиль> <цвет>;*/
    border: 2px solid #0a0;
    
  • Задание фона для элемента.
    Свойства фона могут задаваться так же в одну строку: background: <color> <image> <repeat> <attachment> <position>;
    background: <цвет> <картинка> <повторение> <закрепление> <расположение>;
    background: #f00 url(background.gif) no-repeat fixed 0 0;
    
  • Задание свойств шрифта
    Все свойства шрифта можно тоже задать одной строкой: /*font: <font-style> <font-variant> <font-weight> <font-size/line-height> <font-family>;
    font: <стиль> <вариант> <вес> <размер/высота-строки> <семейство>;*/
    font: italic small-caps bold 1em/140% "Verdana",sans-serif;
    
• Используйте выделение границ элементов для отладки CSS стилей.
  Попробуйте применить следующую конструкцию для своей страницы: * {border:1px solid red;}. Все тэги получили границу шириной в один пиксель. Теперь вы можете легко видеть, все ли на странице располагается так, как вы хотели. Очень удобно при отладке.
• Значения классов и id чувствительны к регистру.
  Будьте внимательны. Довольно часто это приводит к долго выискиваемым ошибкам.
• Центрирование элемента с использованием CSS.
  Для того, что бы центрировать элемент по горизонтали нужно указать его ширину и margin вот в таком виде: .elem {
  width:780px;
  margin: 0 auto;
  }
  Работает во всех современных браузерах.
• Использование свойств min-widht и max-width.
  Два свойства, которые могут быть полезными - это min-width и max-widht. Они задают соответственно минимальную и максимальную ширину элемента. Служат они, в основном, для предотвращения изменения внешнего вида сайта при сильном уменьшении или увеличении окна просмотра браузера. К сожалению, IE не поддерживает эти свойства. Но это можно обойти при помощи динамических выражений, которые поддерживает только браузеры от Microsoft. Вот пример, как это можно сделать: #elem {
  min-width: 600px;
  max-width: 1200px;
  width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
  }
  
• Уменьшайте использование классов.
  В англоязычном мире человека, который пишет множество классов без необходимости, называют 'classitus'. По-русски это можно перевести как 'классисит' или 'классоид'. А смысл совета прост (перефразируя бритву Оккама): не умножай классов без меры.
  Если есть группа элементов, у которых общие свойства, то не обязательно для каждого из них прописывать классы. Можно прописать id у родительского элемента и использовать контекстные селекторы. Пример: CSS:
  a.link{color:#f00;}
  HTML:
  <ul>
  <li><a class="link" href="#">Link1</a></li>
  <li><a class="link" href="#">Link2</a></li>
  <li><a class="link" href="#">Link3</a></li>
  </ul>
  Намного эффективнее написать: CSS:
  #links a{color:#f00;}
  HTML:
  <ul id="links">
  <li><a href="#">Link1</a></li>
  <li><a href="#">Link2</a></li>
  <li><a href="#">Link3</a></li>
  </ul>
  

Различные CSS для разных браузеров

Если же все приведенные выше советы не помогли и вам все же необходимо иметь различные CSS свойства для различных браузеров, то у вас есть два способа сделать это.

Выводы

В статье были рассмотрены различные советы, которые могут помочь сделать работу с CSS более легкой и эффективной. Применять их или нет, дело ваше. Но, помните, что это советы тех, кто столкнулся с той или иной проблемой и нашел ее решение. Не повторяйте чужих ошибок. Учитесь на них.

Также много полезного вы найдете в статье о позичионировании HTML элементов с помощью CSS.

Вот еще полезная статья об альфа фильтрах в CSS.

Еще статьи на тему: Веб дизайн

<<Предыдущая сатья | Следующая сатья>>

S-PRO студия веб дизайна