Главная страница   /   4.7. Использование инструментов CSS (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

4.7. Использование инструментов CSS

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

Браузерный отчет о стилях

Все основные браузеры включают проверку стилей в свои инструменты для разработчиков. Реализация немного различается, но основной предпосылкой является то, что вы можете выбрать элемент из показанного документа или разметку документа и увидеть стили, которые применяются браузером.

Эти инспекторы стилей показывают порядок, в котором каскадируются стили, и вычисленный стиль (который является общим стилем, применяемым к элементу после обработки всех каскадных и унаследованных стилей). Они (инспекторы) даже позволяют редактировать и создавать новые стили, чтобы увидеть результат их использования. Инспектор стилей Google Chrome представлен на рисунке 4-18.

Рисунок 4-18: Проверка CSS стилей при помощи Google Chrome

Создание селекторов при помощи SelectorGadget

В главах 17 и 18 я объясню все те различные селекторы, которые поддерживает CSS. Их много, и они могут быть скомбинированы, чтобы создать мощные и гибкие эффекты. Освоение CSS селекторов занимает много времени, и одним из самых полезных найденных мной инструментов, который предназначен для того, чтобы помочь разработчикам в этой области, является SelectorGadget. Он является букмарклетом JavaScript и доступен на www.selectorgadget.com.

Этот инструмент не обновлялся уже некоторое время, но он все еще работает на современных браузерах. Следуйте инструкциям по установке. При загрузке скрипта вы можете нажимать на элементы в браузере, чтобы создать CSS селекторы. На рисунок 4-19 показано, как работает SelectorGadget.

Рисунок 4-19: Использование SelectorGadget для создания CSS селекторов

Улучшение CSS при помощи LESS

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

Вы можете расширить CSS при помощи LESS, который использует JavaScript для улучшения CSS. Он поддерживает некоторые полезные возможности, такие как использование переменных, наследование одного стиля от другого и функции. Я в последнее время много использую LESS, и я доволен результатами. Вы можете получить информацию и скачать библиотеку JavaScript на http://lesscss.org.

Использование CSS фреймворков

Доступно большое число высококачественных CSS фреймворков, которые можно использовать в качестве основы для веб сайтов и веб приложений. Эти фреймворки содержат наборы стилей, и это обозначает, что вам не нужно заново изобретать колесо. Лучшие фреймворки также сглаживают различия в реализации между браузерами.

CSS фреймворк, который я рекомендую, – это Blueprint, который доступен для скачивания по адресу www.blueprintcss.org. Он прост в использовании и очень гибкий, также он имеет отличную систему для создания сеточной верстки.