Список полезных инструментов для CSS разработчика. Оптимизация css онлайн
Web-инструменты для оптимизации CSS.
Стили могут быть реально большими, как с точки зрения длины, так и размера файла. Чтобы Вы могли убедиться, что ваши веб-страницы не содержат ошибок и быстро загружаются, позвольте Вам представить подборку некоторых из наиболее известных online CSS оптимизаторов / компрессоров, инструментов для форматирования кода и проверки на корректность. Посмотрите их и выберите те, которые наиболее интересны для вас.
Оптимизаци и сжатие.
CSS Optimizer
CSS Optimizer простой онлайн оптимизатор, который обрабатывает ваш CSS и выдает сжатый вариант. Вы можете указать ссылку на Ваш стиль, загрузить файл CSS, или напрямую ввести CSS. Это простой инструмент, без многочисленных опций, поэтому процедура оптимизации будет всегда одинакова для всех Ваших файлов (это замечательно, если Вы хотите стандартизировать параметры сжатия).
Clean CSS
Clean CSS базируется на CSSTidy. Вы можете установить нужный уровень сжатия и настройки сжатия. Он создает отчет, чтобы потом показать Вам что именно изменилось. Также проверяет CSS форматирование и оптимизацию, которая используется в последней версии CSSTidy (1.3dev).
CSS Drive gallery-компрессор CSS
CSS Drive gallery-компрессор CSS имеет два режима, Regular и Advanced (который имеет несколько параметров и которые можно настроить). Вы можете удалять комментарии или обрезать комментарии, которые превышают определенный размер, сохраняя, таким образом, короткие комментарии. Regular режим идеально подходит для тех, кто не слишком требователен - просто выбираете между Light, Normal и Super Compact сжатием и все готово.
Online CSS Optimizer
Online CSS Optimizer - это еще один простой инструмент оптимизации CSS, на основе CSS-оптимизатора для OS X и Linux. У вас есть два способа ввода вашего CSS: либо через текстовое поле, предусмотренное на странице, либо указав ссылку к Вашим стилям. Если Вы захотите откатить назад сжатие CSS - это можно сделать с помощью Uncompress CSS application на сайте.
CSS Compressor
Еще один популярный CSS-инструмент для сжатия - CSS Compressor, (исходный PHP-код CSS Compressor-а). Там есть множество вариантов сжатия, которые можно установить. Это касается цвета, измерений, правил и CSS-свойств. CSS компрессор также предоставляет полезную Combine утилиту для одновременного комбинирования и сжатия до трех отдельных CSS-файлов.
flumpCakes Style Sheet Optimizer
flumpCakes Style Sheet Optimizer - еще один инструмент для оптимизации и форматирования. Он позволяет Вам выбирать сочетания атрибутов фона, шрифтов, списков, границ, и Pretty Print опцию, которая стандартизирует формат кода. Одной из лучших функций является Backlink-функция. Она предоставляет вам URL, который Вы можете добавить в закладки и вернуться в любое время чтобы просмотреть Ваши стили в сжатом состоянии.
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом
www.webmasters.by
Онлайн сервисы для оптимизации CSS shram.kiev.ua
- Расширение .css
- MIME-тип text/css
- Опубликован17 декабря 1996
- Тип форматаЯзык стилей
- Сайт w3.org/Style/CSS
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
Один из наиболее важных факторов при разработке веб-сайта является тест скорости сайта. Загружать страницу нужно как можно быстрее, особенно в случае больших сайтов с большим количеством CSS кода, в котором более быстрая загрузка означает повышение удобства использования и удовлетворенности пользователей.
Инструменты для сжатия CSS улучшают время загрузки, удалив комментарии из кода, включающих каждую команду в одной строке, удаление "белого пространства" - пробелов и переносов строк.
Имейте в виду, если вы действительно хотите, увеличить производительность веб-сайта, после стадии разработки, вы должны пойти еще дальше и использовать GZIP сжатие и кэширование ваших файлов. Но об этом мы поговорим в следующей статье!
Попробуйте воспользоваться одним из этих онлайн сервисов по оптимизации CSS файлов (некоторые из них также предлагают и JavaScript сжатие), и посмотреть, как они могут ускорить время отклика веб-сайт и сохранить пропускную способность.
1. Cssdrive.com
Cssdrive.com CSS Compressor — работает в 2 режимах: обычный и продвинутый. Вы можете выбрать один из трех уровней сжатия. Режим "Normal" должен хорошо работать в большинстве случаев, создавая оптимальный баланс между ними.
2. Cleancss.com
Cleancss.com – CSS форматирование и оптимизатор на основе csstidy доступна на английском, немецком и французском языках.
3. CSS Compressor
CSS Compressor - можно выбрать 4 уровня сжатия.
4. CSS Optimizer
CSS Optimizer - Оптимизация CSS указав URL адрес css-файла, загрузив файл с локального компьютера или непосредственно введя CSS код в форму.
6. Askapache.com
7. Iceyboard.no-ip.org
iceyboard.no-ip.org CSS Compressor - Вы можете загрузить файл, указать URL CSS-файла или вставить CSS код. Хорошие варианты сжатия.
8. Ebiene.de
Ebiene.de – сервис для сжатия JavaScript и CSS файлов. Вы можете выбрать между базовым сжатием и сильным.
9. Pagecolumn.com
Pagecolumn.com – Сжатие CSS, возможность поиска и удаления неиспользуемых классов и ID в CSS (опционально).
10. Pingates.com
Pingates.com - Вы можете указать URL CSS файла или вставить CSS код.
11. Lotterypost.com
Lotterypost.com CSS компрессор - нужно просто вставить CSS код и нажать кнопку «Сжать».
12. Peterbe.com
Peterbe.com - XHTML, HTML и CSS компрессор. Без каких-либо вариантов.
13. Refresh-sf.com
Refresh-sf.com — Сервис для JavaScript / CSS сжатия. Использует YUI Compressor. Просто вставьте код в текстовое поле или выберите файл для загрузки. Затем выберите тип сжатия, JS или CSS.
14. Sevenforty.com
Sevenforty.com CSS Compressor - основанный на Java YUI Compressor. Просто загрузите CSS файл, который вы хотите уменьшить и вы получите сжатый CSS файл в ZIP архиве.
15. Phpinsider.com
Phpinsider.com – использует метод Monte Ohrt, нет вариантов сжатия, просто вставьте код CSS и забирайте результат.
16. Devtrench.com
Devtrench.com -CSS Compressor на основе CSSTidy
17. Cssportal.com
Cssportal.com - CSS Compressor на основе CSSTidy
18. Mabblog.com
Mabblog.com – Укажите URL CSS файла или вставить код CSS, нет вариантов сжатия.
19. Creativyst.com
Creativyst.com – CSS и JavaScript компрессор.
20. Generateit.net
Generateit.net – CSS Compressor на основе CSSTidy
21. Arrantius.com
Arrantius.com CSS Compressor - написанный на JavaScript, поэтому нет передачи вашего CSS неизвестному серверу. Он вынимает комментарии и пробелы в CSS файле, не более того.
22. Artiss.co.uk
Artiss.co.uk - только загрузка файлов, возможность удалять комментарии или нет.
23. Homepage-Performance.de
Homepage-Performance.de – варианты: удалить пробелы, последняя точка с запятой, замена цветов и т.д. Вы можете только вставлять CSS код в поле ввода.
24. Isnoop.net
Isnoop.net – варианты: удалить пробелы, отступы и новую линию перед открывающей фигурной скобкой.
В заключение
Не бойтесь экспериментировать с этими сервисами. Большинство из них показывают результат в виде процента сжатия от оригинала и размер файла на выходе.
Если Вы знаете еще какие-либо онлайн-сервисы по оптимизации CSS, которые нет в этой статье, сообщайте об этом в комментариях.
www.shram.kiev.ua
Список полезных инструментов для CSS разработчика / Хабр
Это не попытка создать список всех существующих инструментов для CSS разработки. Только некоторые, наиболее полезные были отобраны и размещены в соответствующих категориях.
Grid Designer Позволяет создать модульную сетку макета, с учетом таких параметров как: количество колонок, расстояние между колонками, размер полей, кегль основного шрифта, кегль заголовков, отступы и т.д. А также можно посмотреть, как будут выглядеть основные элементы форматирования текста в данной сетке.
Layout Generators Позволяет создавать резиновую многоколоночную или сеточную разметку. Позволяет задавать ширину и цвет. CSS код генерируется автоматически.
Генератор HTML+CSS шаблонов Сервис позволяет в несколько кликов мыши получить готовый дивовый каркас с нужными параметрами. После выбора параметров будет предложено скачать архив, в котором находится 2 файла с HTML и CSS.
PSD2CSS Cервис, для конвертирования PSD макетов в cверстанную страницу. Быстро, бесплатно и относительно качественно.
Boks Boks это визуальный редактор для CSS фреймворка Blueprint, сделанный в виде приложения Adobe AIR. С помощь этого редактора можно визуально создавать и заполнять разметочную сетку, задавать вертикальный ритм, и экспортировать результат в HTML и CSS.Полезные инструменты и ссылки для CSS фреймворка Blueprint.
YAML Builder YAML Builder это онлайновый сервис для визуального создания шаблонов основанных на HTML/CSS фреймворке YAML.
YUI CSS Grid Builder Простой веб интерфейс, используемый для быстрого создания кроссбраузерных шаблонов на основе YUI grid.
960 Grid System – Variable Grid System Variable Grid System – это быстрый способ создать CSS сетку, на основе CSS фреймоврка 960 Grid System.
Grid System Generator Grid System Generator позволяет создавать шаблоны с фиксированной разметкой и валидным CSS / XHTML. Шаблоны могут быть основаны на одном из четырех CSS фреймворков: 960 Grid System, Golden grid, 1kb grid, Simple grid system. В дополнение к каждому шаблону также создается png файл для дизайна в Fireworks, Illustrator, OmniGraffle, Photoshop или Visio.
CSS Type Set Это сервис позволяющий применить к тексту CSS свойства и посмотреть, как это будет выглядеть. Все изменения моментально отражаются на примере, а сгенерированный CSS код можно скопировать и использовать в дальнейшем.
TypeChart С помощью Typechart можно оценить оформление различных шрифтов. После обнаружение понравившегося варианта можно скопировать CSS код для использования на своем сайте.
Texster Texster — сервис для подбора «безопасных» шрифтов для вашего сайта. Не смотря на то, что существует множество аналогичных и в основном зарубежных ресурсов, texster отличается тем, что результаты отображаются сразу для всех шрифтов, что позволяет сравнить их и выбрать нужный.
CSS-Typoset Matrix and Code Generator
CSStxt Несложный веб-инструмент создания CSS стилей шрифта.
EM Calculator AIR Application Калькулятор вертикального ритма в XHTML & CSS; легко конвертирует px в em; padding и margins вычисляются автоматически.
Em Calculator Em Calculator это небольшой JavaScript инструмент который преобразовывает определенное значение px в соответствующее значение в em.
PXtoEM PXtoEM — таблица показывающая размеры шрифтов в различных единицах измерения, которая также помогает переводить размер из одного значения в другое.
CSS Color Editor CSS Color Editor позволяет заменить цветовую схему вебсайта. На сервис локальный CSS файл, выбираются новые цвета, а затем сервис генерирует CSS файл с уже замененными цветами.Color Palette Generator По заданному рисунку генерируют цветовую палитру состоящую из ключевых цветов.
Color Contrast Check Действительно интуитивный онлайн инструмент для проверки цвета, который позволяет внести цвет переднего и заднего фона в шестнадцетиричном формате или при помощи ползунков. Инструмент даёт моментальный результат — показывает, как выглядит эта комбинация и обладает ли она достаточной контрастностью при просмотре людьми, у которых нарушено цветовосприятие, или при просмотре на черно-белом экране (тест WCAG 2).
ColorZilla ColorZilla расширение для Firefox. В ColorZilla можно получить цвет, кликнув в любом месте сайта и после перенести этот цвет в любую другую программу (имеется 5 вариантов описания цвета). Можно изменять масштаб изображения страницы(20% – 1000%). Так же есть встроенный просмотрщик палитры, избранное, DOM инспектор и поддержка firebug.
Конвертор HSL в RGB
CSS Sprite Generator Этот инструмент позволяет автоматизировать процесс создания CSS спрайтов. Просто дайте ему ZIP файл, содержащий 2 и более изображений (GIF, PNG или JPG), и он будет генерировать спрайт-изображение и соответствующие правила CSS для ориентации и отображения каждого элемента изображения.YASC (Yet Another Sprite Creator) Еще один генератор. Процесс создания спрайта представляет собой следующее: загружается картинка, затем визуально отмечаются необходимые области и им назначается CSS id. Когда выбраны все участки происходит генерация CSS для этих спрайтов.
SmartSprites SmartSprites это консольная Java утилита для создания CSS спрайтов. SmartSprites орабатывает специальные директивы в CSS файле, отмечающие отдельные картинки которые должны быть превращены в спрайты. После обработки CSS файла из отмеченных картинок создается спрайт, и автоматически меняются соответствующие фрагменты файла на использования спрайта вместо одиночных картинок.
Quick Form Builder Генерирует XHTML /HTML -совместимые и доступные формы с CSS разметкой. Вводим имена полей, затем выбираем типа каждого поля, формат( HTML или XHTML ) и получаем готовый HTML и CSS код формы.Wufoo Wufoo – это бесплатный онлайновый сервис, позволяющий с легкостью создавать хорошо выглядящие, валидные CSS/XHTML формы.
List-o-Matic Генерирует навигационные меню ( до 2 уровней), позволяя выбрать одно из нескольких доступных оформлений.CSS Menu Generator Генерирует горизонтальные, вертикальные, выпадающие CSS меню.
ThemeRoller Позволяет создавать собственные темы для jQuery UI.
CSS Text Wrapper Сервис CSS Text Wrapper позволяет легко придать тексту любую форму и вставить к себе на страницу. Линиями задаем форму. Узловые точки добавляются по нажатию на линию в том месте где необходимо добавить. Можно настроить размеры блока, выравнивание, шрифт и т.д.The Box Office Этот инструмент который позволит создать обтекание текста для картинок с различной неправильной формой. Просто вводите ссылку на любую картинку произвольной формы, задаете основное выравнивание изображения, цвет фона, который нужно игнорировать, высоту строки дополнительные отступы и цвет текста, а далее — идем за результатом.
W3C CSS Validation Service Проверка CSS на валидность.CSS Analyzer CSS Analyser сочетает W3C CSS Validation Service и дополнительную проверку цветов на контрастность (полезен для улучшения юзабилити) и единиц измерения, используемых в исходном коде. Результатом является очень подробное описание ошибок и предупреждений, точно так же как в W3C CSS Validation Service.
Firebug Firebug — расширение для браузера Firefox, являющееся консолью, отладчиком, и DOM-инспектором JavaScript, DHTML, CSS, XMLHttpRequest. Firebug показывает в консоли вызвавшую ошибку функцию, стек вызовов функций, вызвавших эту ошибку. Он предупреждает, что CSS-правило или JavaScript-метод/свойство, которое вы пытаетесь использовать, не существует.
Dust-Me Selectors Позволяет проанализировать страницу и показать, сколько и какие стили не используются на странице сайта, а также укажет в каком файле стилей, в какой строке они прописаны.CssCleaner Приложение Windows для удаления неиспользуемых CSS классов.
CSS Redundancy Checker Проверяет, все ли правила из CSS используются в HTML. После проверки выводит список не использованных на данной странице или группе страниц.
CSS Drive CSS Compressor CSS компрессор с опциями компрессии «Слабая», «Нормальная» и «Сверхкомпактная».Robson CSS Compressor Еще один хороший инструмент для компрессии CSS файлов — Robson CSS Compressor. Пока он в стадии разработки, и возможны неточности в его работе.
MinifyMe – AIR Application Небольшое AIR-приложение, которое позволит собрать несколько css-файлов в один.
CleanCSS – CSS Formatter and Optimizer Clean CSS является популярным онлайн-инструментом для форматирования и оптимизации CSS. Содержит группы настроек для баланса между оптимизацией и читабельностью. Одна из важных возможностей – это автоматическое соединение одинаковых селекторов и свойств.Styleneat Styleneat преобразовывает код CSS в стандартизированный, удобный для чтения формат, структурирует таким образом, что становится легко понять где какие области и как они связаны друг с другом.
CSS Toolbox Бесплатный CSS Toolbox включает множество инструментальных средств для быстрой и эффективной разработки CSS –валидатор, форматтер, оптимизатор.
Conditional-CSS Парсер CSS файлов на строне сервера с проверкой на тип и версию браузера. Позволяет сформировать специальные условные комментарии для различных групп браузеров. Доступны версии на PHP, C# и С.7 простых способов протестировать кроссбраузерную совместимость
Web Browser CSS Support Подробная таблица поддержки CSS-стандарта популярными браузерами.
When Can I Use? Даёт возможность сравнить поддержку браузерами различных новейших технологий, а именно — HTML 5, CSS 3, SVG и т.д. Можно выбрать как определённые браузеры, временные периоды, статусы, так и определённые технологии.
IE7.js IE7-js это JavaScript библиотека, которая исправляет множество багов в HTML и CSS для версий Internet Explorer седьмой и ниже. К примеру, она исправляет поддержку прозрачности в PNG, фиксированное позиционирование элементов и фоновых изображений (position: fixed), поддержку псевдо класса: hover для всех тэгов и др.
Modernizr Modernizr это небольшая простая Javascript-библиотека, которая поможет использовать такие технологии, как CSS3, HTML5 в браузерах которые еще не поддерживают это технологии.
Sizzle JavaScript Selector Library Быстрый JavaScript движок выбора CSS селекторов. Sizzle поддерживает практически все CSS3 селекторы – даже такие редко используемые, как экранированные селекторы (”.foo\+bar”), юникодные селекторы и т.д.YASS: Yet Another cSS selector Самая быстрая JavaScript-библиотека для выбора элементов по CSS-селектору.
SelectORacle Сервис дает описание на человеческом языке сложных селекторов CSS и может быть очень полезен при изучении оных.
YUI Selector Utility YUI Selector Utility позволяет использовать синтаксис CSS3 селекторов на JavaScript, упрощая сбор, фильтрацию и тестирование HTML элементов.
YUI StyleSheet Utility С помощью StyleSheet Utility на лету создавать и модифицировать CSS стили.
XRAY XRAY это букмарклет, который может демонстрировать разную полезную информацию о всех «внутренностях» страницы. В частности, размеры всех элементов, координаты их расположения, CSS-свойства, названия HTML тегов, соответствующих отображаемым блокам, и некоторые другие детали.CSS Cheat Sheet Одностраничный CSS cheat sheet перечисляющий все селекторы (CSS 2.1) и свойства. Включает картинку box-модели, единицы измерения CSS.CSS Shorthand Cheat Sheet
YUI Library: CSS Reset, Base, Fonts, и Grids
Blueprint CSS Cheat Sheet
MoreCSS MoreCSS это ориентированная на дизайнеров JavaScript библиотека, которая позволяет писать код в CSS стиле для создания всплывающих окон, тултипов, меню на табах, таблиц «зебра», расширинных стилей списков и применения кросс-браузерной прозрачности.LESS – Leaner CSS Less это Ruby gem, который расширяет CSS добавляя следующими возможностями: переменные, миксины, операции и вложенные правила. Достаточно переименовать .css файлы .less для получения всех этих возможностей.
DtCSS DtCSS – это PHP скрипт, который обрабатывает CSS файлы, позволяя использовать в них вложенные селекторы, цветовое смешение и т.д. DtCSS читает CSS файл со специальными инструкциями написанными для DtCSS, и выдает наружу обычный CSS. Имеется умная кэширующая система.
Sass + Compass SASS — компилятор в стайлшиты. Очень удобно — форматирование отступами, как в питоне, миксины с параметрами (почти функции), переменные и операции над ними.
habr.com
