Здравствуйте. Сегодня, мне бы хотелось рассказать о том, что лично мне, весьма помогает работать (имеется ввиду верстать) быстрее, а значит, отчасти, меньше. Я расскажу об инструментах и технологиях которые я старюсь использовать в верстке на каждом проекте, естественно по мере необходимости. Все инструменты абсолютно открыты для использования, и они не являются плагинами или расширения к редакторам, о которых я писал ранее в посте «Парочка инструментов для того, чтобы работать быстрее». Итак начнем.
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 верстальщика”
Я считаю, что LESS и прочие CSS препроцессоры скорее не для верстальщиков, а для программистов, вынужденных заниматься версткой.
Не совсем с вами согласен, лично я использую их в работе, так как они реально помогают сэкономить время. В свое время вы делали пост о собственных сниппетах для верстки под NetBeans, так вот там видео примере вы часто копировали предыдущий класс для наследования каскада. Этого можно избежать посредством вложенных правил в LESS. И в итоге к вашему быстрому методе добавляется еще один ускоритель.
Пост замечательный! только начинаю более глобально углубляться в мир верстки и многое ещё непонятно…
Может быть конечно не в тему этого поста, но всё же:
вы не могли бы дать ссылку или объяснить, как делать такую полосу меню как на сайте LESS-a? (которая сначала находится на одном месте, а при прокрутке страницы вниз не уходит вверх как всё содержимое страницы, а «прилипает» к её верхней части и остается постоянно там).
Так понимаю это делается с помощью JS, но просто даже и не знаю как это гуглить и где это искать… буду благодарен за помощь!!!
Если просто, то это делается даже на 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;
}
};