Опубликовано автор в категориях Верстальщику.

Инструменты для HTML и CSS верстальщика
Здравствуйте. Сегодня, мне бы хотелось рассказать о том, что лично мне, весьма помогает работать (имеется ввиду верстать) быстрее, а значит, отчасти, меньше. Я расскажу об инструментах и технологиях которые я старюсь использовать в верстке на каждом проекте, естественно по мере необходимости. Все инструменты абсолютно открыты для использования, и они не являются плагинами или расширения к редакторам, о которых я писал ранее в посте «Парочка инструментов для того, чтобы работать быстрее». Итак начнем.

CSS препроцессор LESS

Для чего использовать CSS препроцессоры и нужно ли их использовать вовсе. Мой ответ — однозначно да, там где этого требует и позволяет проект. Ведь всем нам очень часто хочется задать одну глобальную переменную, которая бы отвечала за ряд определенных свойств и использовалась бы вместо левого класса или куска кода. Всем верстальщикам знакома ситуация, когда приходится писать длинные списки командируемых наследуемых правил и много кратно копипастить имена родительских элементов, а ведь этого можно избежать. И есть еще ряд преимуществ, которые нам дают CSS препроцессоры. Лично я использую LESS, dj многом потому, что он на данный момент поддерживает JS обработчик, что позволяет обрабатывать его синтаксис на стороне клиента и там же получать готовый CSS файл.

Есть правда и небольшие недостатки, которые лично я воспринимаю как плату за все большие достоинства. Во первых, при использовании препроцессора в некоторых браузерах локально, без использования сервера нельзя видеть результат обработки фала стилей. Однако, Firefox справляется с этим и единственным недостатком остается в нем только то, что при использовании FireBag, нельзя искать строку в коде по номеру, который берет FireBug из скомпилированного файла стилей.

Bootstrap.less

Собственно, это не совсем самостоятельный инструмент, а «довесок» к LESS. Bootstrap.less это набор готовых, так называемых mixins и переменных, которые могут часто использоваться в версте, что позволить уменьшить время разработки с использованием CSS препроцессора.

Для Internet Explorer использую CSS3PIE

Если вкратце, PIE дает возможность использовать в Internet Explorer 6-8 некоторые из наиболее полезных свойств CSS3. Самое интересное, что использовать его можно как с помощью зловредного behavior, так и непосредственно в связке в виде подгружаемого JavaScript в связке с другими полезными библиотеками типа jQuery, Mootools, ProtoType и т. д.. Дополнительные библиотеки используются для того, чтобы облегчить работу с элементами DOM, но можно использовать и стандартные методы  JavaScript для работы с элементами.

На сегодняшний день PIE имеет полную или частичную поддержку следующих CSS3 свойств :

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient as background image

Если вы не хотите использовать передовые технологии для Internet Explorer во вред себе и во благо Microsoft, то вам поможет следующий инструмент.

Modernizr

Modernizr — это небольшой (в сжатом виде не более 4 Кб) скрипт, который не делает ничего кроме как добавляет классы <html> элементу, которые позволят вам добавить специфичные стили для решения определенных задач в зависимости от поддержки браузером той или иной функции.

Допустим, в нормальных браузерах вы хотите использовать свойство border-radius для создания закругленных углов у бокса, а в Internet Explorer вы хотите использовать принцип « красивой деградации» (Beautiful Degradation) и для этого вам нужен естественно специальный набор стилей. Так вот, для это наиболее правильно сделать с помощью каскадирования с применением общего класса для нужного бокса, например:

.border-radius div {
  /* свойства для браузеров, которые
      поддерживают border-radius */
}
.no-border-radius div {
  /* дополнительные свойства
      для браузеров, которые не поддерживают border-radius*/
}

Так вот все что вам нужно сделать, чтобы получить нужные селекторы для каскадирования — это подключить Modernizr-скрипт и он автоматически добавить классы к элементу <html> с идентификаторами наличия или отсутствия свойств.

P.S. мысли о… Свадьбе

Я женат, и у меня была свадьба, а на свадьбе была тамада. Но вот друг собрался женится и думаю что если он спросит моего совета по поводу тамады, то я ему порекомендую взять тамадой Светлану Светлую. Замечательный тамада и ведущий свадеб, праздников и других торжеств. Считаю, что всем должен заниматься мастер. Кто-то мастерски делает сайты, а кто-то, как Светлана, мастерски ведет свадьбы.

4 комментария к записи “Джентльменский набор HTML и CSS верстальщика”

  1. TecHMeaT

    Я считаю, что LESS и прочие CSS препроцессоры скорее не для верстальщиков, а для программистов, вынужденных заниматься версткой.

    Ответить
    • Hiway

      Не совсем с вами согласен, лично я использую их в работе, так как они реально помогают сэкономить время. В свое время вы делали пост о собственных сниппетах для верстки под NetBeans, так вот там видео примере вы часто копировали предыдущий класс для наследования каскада. Этого можно избежать посредством вложенных правил в LESS. И в итоге к вашему быстрому методе добавляется еще один ускоритель.

      Ответить
  2. JSN

    Пост замечательный! только начинаю более глобально углубляться в мир верстки и многое ещё непонятно…
    Может быть конечно не в тему этого поста, но всё же:
    вы не могли бы дать ссылку или объяснить, как делать такую полосу меню как на сайте LESS-a? (которая сначала находится на одном месте, а при прокрутке страницы вниз не уходит вверх как всё содержимое страницы, а «прилипает» к её верхней части и остается постоянно там).
    Так понимаю это делается с помощью JS, но просто даже и не знаю как это гуглить и где это искать… буду благодарен за помощь!!!

    Ответить
    • Hiway

      JSN Если просто, то это делается даже на CSS, то есть элементу передается position:fixed, но на сайте LESS есть еще небольшой скрипт, который меняет изначальное абсолютное позиционирование элемента навигации на фиксирование сразу после того, как элемент подходит к верху браузера. Вот именно тот кусочек, который отвечает за меню:

      var menu = document.getElementById('menu');
      var init = menu.offsetTop;
      var docked;
      for (var i = 0; i < headers.length; i++) {
      headers[i].id = '-' + headers[i].innerHTML.toLowerCase().replace(/ /g, '-');
      }
      window.onscroll = function () {
      if (!docked && (menu.offsetTop - scrollTop() < 0)) {
      menu.style.top = 0;
      menu.style.position = 'fixed';
      menu.className = 'docked';
      docked = true;
      } else if (docked && scrollTop() <= init) {
      menu.style.position = 'absolute';
      menu.style.top = init + 'px';
      menu.className = menu.className.replace('docked', '');
      docked = false;
      }
      };

      Ответить

Оставить комментарий

  • (не будет показан)