Для веб-разработки CSS — наиболее эффективная технология для украшения страниц и задания макетов страниц. Но проблема в том, что CSS — это язык разметки с очень свободной и неточной синтаксической структурой. Веб-программисты часто находят в своих или чужих CSS-файлах много избыточного кода, ошибок или участков, которые можно значительно оптимизировать. Если вы часто используете статические языки программирования (например, Java, C), вы обнаружите, что практичные инструменты IDE приносят огромную эффективность в программирование. Типичный пример — интегрированная среда разработки, такая как Eclipse, которая может автоматически анализировать проблемы кода в реальном времени. Итак, есть ли у CSS-программистов такие полезные инструменты?

Все 10 инструментов, представленных ниже, — это онлайн-приложения. Вам не нужно устанавливать их на компьютер. Пока есть доступ к Интернету, вы можете ими пользоваться. Большинство этих инструментов очень просты в использовании, но некоторые требуют навыков.

Инструмент проверки проблем CSS:CSS Lint

CSS Lint — это инструмент с открытым исходным кодом для проверки качества CSS-файлов. Изначально он был написан Николасом К. Закасом и Николь Салливан, а первоначальная версия была выпущена на конференции Velocity в июне 2011 года. Правила проверки CSS Lint включают ошибки и предупреждения. Когда селекторы или свойства написаны неправильно, отсутствуют фигурные скобки или избыточно добавлены точки с запятой, он выводит ошибки разбора, причем ошибки разбора отображаются в приоритетном порядке.

Инструмент анализа и статистики CSS-кода:CSS Stats

Css Stats — это онлайн-инструмент анализа CSS-кода. Вы можете анализировать CSS-код, введя URL CSS сайта. Css Stats — мощный инструмент для фронтенд-веб-дизайнеров для анализа CSS-кода сайта. Он может подсчитывать правила, размеры шрифтов, ширину и высоту, количество цветов и т. д. в CSS-коде.

Для веб-дизайнеров обмен CSS-кодом веб-страниц — обязательная задача. Чтобы проанализировать эффект дизайна всего сайта, нужна подробная статистика того, сколько шрифтов, размеров шрифта, цветов и фоновых цветов используется в дизайне сайта. Css Stats также предоставляет данные CSS-анализа для популярных сайтов, таких как Google, Yahoo, Twitter, Facebook, Tumblr и т. д.

Инструмент оптимизации и сжатия CSS-кода:CSS Shrinks

CSS Shrinks может значительно сжать размер вашего CSS. Многие веб-программисты пишут CSS-код с большим количеством избыточного синтаксиса и пробелов. Этот инструмент позволяет оптимизировать синтаксис CSS, удалить бесполезные пробелы и пустые строки, значительно сжать итоговый CSS и существенно сократить потери пропускной способности без ущерба для корректности вашего CSS.

Инструмент форматирования CSS-кода:ProCSSor

ProCSSor не только предоставляет базовые функции оптимизации CSS-кода, но и предлагает множество вариантов настройки. Например, он позволяет задать параметры оптимизации для CSS-правил, CSS-свойств и синтаксиса CSS. Он также предлагает резервные решения для несовместимости новых свойств и правил CSS3 в различных браузерах.

Справочник по синтаксису CSS от Codrops

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

Инструмент проверки совместимости CSS3 с браузерами:Can I Use

«Can I Use» — здесь вы можете найти совместимость всех новых веб-функций с разными брендами браузеров и разными версиями каждого бренда. Когда вы знаете, какие браузеры используют ваши целевые пользователи, эти таблицы будут очень полезны при создании вашего сайта. Откройте caniuse.com, на главной странице перечислены все HTML5, CSS3 и другие новые веб-функции. Если вы хотите просмотреть совместимость какой-либо функции в разных браузерах, просто щёлкните по ней. Например, чтобы увидеть совместимость @font-face Web fonts в различных браузерах, щёлкните первый пункт в области CSS, и вы увидите таблицу со всеми версиями браузеров, где разные цвета обозначают поддержку @font-face Web fonts каждым браузером. Красный указывает на отсутствие поддержки, светло-зелёный — на частичную поддержку. В число браузеров, перечисленных на рисунке, также входят некоторые браузеры мобильных устройств и планшетов, например браузер системы Android. С такой исчерпывающей информацией при проектировании сайта вы можете выборочно использовать продвинутые функции CSS и JavaScript в соответствии с целевыми пользователями сайта, чтобы улучшить пользовательский опыт.

Проверьте, соответствует ли ваш код стандартам CSS:W3C CSS Validation Service

Этот инструмент используется для проверки того, правилен ли синтаксис вашего CSS и соответствует ли он стандартам W3C CSS. Мы знаем, что начиная с самых ранних версий IE различные браузеры реализовали собственные диалекты, несовместимые друг с другом в разных браузерах. Однако при разработке веб-страниц мы должны по возможности учитывать совместимость браузеров. Лучший способ — следовать спецификациям стандарта W3C CSS. W3C CSS Validation Service используется для проверки проблем в вашем CSS. Он подскажет, в каком синтаксисе, в каких свойствах и в каких правилах есть проблемы.

CodePad

Codepad.org — очень интересный сайт. Его главная страница очень проста: слева расположены языки программирования, которые можно компилировать и выполнять, справа — поле ввода, в которое вы вводите свою программу, а под полем ввода — кнопка-флажок «Запустить код» и кнопка «Отправить».

Управлять им тоже очень просто. Сначала выберите язык программирования, который хотите скомпилировать и запустить, затем вставьте или введите исходный код программы в поле ввода и нажмите «Отправить». Вы увидите сообщения об ошибках компиляции или результаты выполнения.

Возможно, вы считаете это скучным, но я думаю, что в определённые моменты это может быть очень полезно, особенно когда вы не можете найти компилятор и хотите проверить фрагмент кода. Такие ситуации встречаются довольно часто. В частности, трудно иметь компьютер, способный запускать все языки. Если такой есть, то это, должно быть, ваш личный компьютер. Когда вы пользуетесь не своим компьютером, вы будете нервничать. Более того, я считаю этот сервис очень интересным, потому что таким образом вы можете писать программы на любом языке даже на мобильном телефоне.

В настоящее время этот сайт поддерживает следующие языки — C, C++, D, Haskell, Lua, OCaml, PHP, Perl, Plain Text, Python, Ruby, Scheme, Tcl.

Инструмент генерации CSS-анимации:Gradient Animator

Это инструмент генерации динамического фона, реализованный с использованием технологий CSS Gradient и CSS Animation. Инструмент очень прост в использовании. Несколькими щелчками мыши создаётся код современного градиентного динамического фона. Он позволяет плавно перемещать градиентный фон CSS. Вы можете задать угол движения, скорость движения и угол градиента. Он поддерживает все современные браузеры и IE 10+. Он очень хорошо подходит для создания заставок веб-страниц.

Инструмент веб-цветов:CSS Colours

Как следует из названия, этот инструмент используется для удобства веб-дизайнеров в поиске цветов. Он предоставляет визуальные эффекты различных цветов, а также английские названия цветов, значения RGB и шестнадцатеричные значения, что делает его очень удобным в использовании.

Источник: http://www.webhek.com/10-css-tools