Romych: /* Оптимизация / CSS Minify */

2021-05-19T08:02:10Z

Оптимизация / CSS Minify

Нова сторінка

== Документация ==

* https://webref.ru/css — Справочник CSS
* https://www.w3.org/Style/Examples/007/units.ru.html — W3C про единицы измерения CSS

==Макеты==

* [http://csscreator.com/tools/layout CSS Layout Generator] — Этот генератор может создать трехколоночный (одно-, двух-) макет с плавающей или фиксированной разметкой, содержащий header и footer. Размеры можно задавать в px, em или %.
* [http://grid.mindplay.dk/ Grid Designer] — Позволяет создать модульную сетку макета, с учетом таких параметров как: количество колонок, расстояние между колонками, размер полей, кегль основного шрифта, кегль заголовков, отступы и т.д. А также можно посмотреть, как будут выглядеть основные элементы форматирования текста в данной сетке.
* [http://www.pagecolumn.com/ Layout Generators] — Позволяет создавать резиновую многоколоночную или сеточную разметку. Позволяет задавать ширину и цвет. CSS код генерируется автоматически.
* [http://csstemplater.com/ Генератор HTML+CSS шаблонов] — Сервис позволяет в несколько кликов мыши получить готовый дивовый каркас с нужными параметрами. После выбора параметров будет предложено скачать архив, в котором находится 2 файла с HTML и CSS.

==CSS Фреймворки==

* [http://toki-woki.net/p/Boks/ Boks] — визуальный редактор для CSS фреймворка Blueprint, сделанный в виде приложения Adobe AIR. С помощь этого редактора можно визуально создавать и заполнять разметочную сетку, задавать вертикальный ритм, и экспортировать результат в HTML и CSS.
* [http://wiki.github.com/joshuaclayton/blueprint-css/tools-and-resources Полезные инструменты и ссылки для CSS фреймворка Blueprint.]
* [http://builder.yaml.de/ YAML Builder] — онлайновый сервис для визуального создания шаблонов основанных на HTML/CSS фреймворке YAML.
* [http://developer.yahoo.com/yui/grids/builder/ YUI CSS Grid Builder] — Простой веб интерфейс, используемый для быстрого создания кроссбраузерных шаблонов на основе YUI grid.
* [http://www.spry-soft.com/grids/ 960 Grid System – Variable Grid System] — быстрый способ создать CSS сетку, на основе CSS фреймоврка 960 Grid System.
* [http://www.gridsystemgenerator.com/ Grid System Generator] — позволяет создавать шаблоны с фиксированной разметкой и валидным CSS / XHTML. Шаблоны могут быть основаны на одном из четырех CSS фреймворков: 960 Grid System, Golden grid, 1kb grid, Simple grid system. В дополнение к каждому шаблону также создается png файл для дизайна в Fireworks, Illustrator, OmniGraffle, Photoshop или Visio.

==Шрифты==

* [http://www.typetester.org/ Typetester] — весьма удачное веб-приложение, предназначенное для сравнения шрифтов между собой. По словам разработчиков, основная задача — облегчить жизнь веб-дизайнера. Одновременно можно сравнивать три шрифта.
* [http://csstypeset.com/ CSS Type Set] — Это сервис позволяющий применить к тексту CSS свойства и посмотреть, как это будет выглядеть. — Все изменения моментально отражаются на примере, а сгенерированный CSS код можно скопировать и использовать в дальнейшем.
* [http://www.typechart.com/ TypeChart] — С помощью Typechart можно оценить оформление различных шрифтов. После обнаружение понравившегося варианта можно скопировать CSS код для использования на своем сайте.
* [http://texster.ru/ Texster] — сервис для подбора «безопасных» шрифтов для вашего сайта. Не смотря на то, что существует множество аналогичных и в основном зарубежных ресурсов, texster отличается тем, что результаты отображаются сразу для всех шрифтов, что позволяет сравнить их и выбрать нужный.
* [http://www.jan-quickels.de/tools-web-typography/ CSS-Typoset Matrix and Code Generator]
* [http://csstxt.com/ CSStxt] — Несложный веб-инструмент создания CSS стилей шрифта.
* [http://jameswhittaker.com/projects/apps/em-calculator-air-application/ EM Calculator AIR Application] — Калькулятор вертикального ритма в XHTML & CSS; легко конвертирует px в em; padding и margins вычисляются автоматически. [http://riddle.pl/emcalc/ Em Calculator] — Em Calculator это небольшой Javascript инструмент который преобразовывает определенное значение px в соответствующее значение в em.
* [http://pxtoem.com/ PXtoEM] — таблица показывающая размеры шрифтов в различных единицах измерения, которая также помогает переводить размер из одного значения в другое.

==Цвет==

* [http://css-color-replace.orca-multimedia.de/ CSS Color Editor] — позволяет заменить цветовую схему вебсайта. На сервис локальный CSS файл, выбираются новые цвета, а затем сервис генерирует CSS файл с уже замененными цветами.
* [http://www.cssdrive.com/imagepalette/ Color Palette Generator] — По заданному рисунку генерируют цветовую палитру состоящую из ключевых цветов.
* [http://www.snook.ca/technical/colour_contrast/colour.html Color Contrast Check] — Действительно интуитивный онлайн инструмент для проверки цвета, который позволяет внести цвет переднего и заднего фона в шестнадцетиричном формате или при помощи ползунков. Инструмент даёт моментальный результат — показывает, как выглядит эта комбинация и обладает ли она достаточной контрастностью при просмотре людьми, у которых нарушено цветовосприятие, или при просмотре на черно-белом экране (тест WCAG 2).
* [http://www.colorzilla.com/firefox/ ColorZilla] — расширение для Firefox. В ColorZilla можно получить цвет, кликнув в любом месте сайта и после перенести этот цвет в любую другую программу (имеется 5 вариантов описания цвета). Можно изменять масштаб изображения страницы(20% – 1000%). Так же есть встроенный просмотрщик палитры, избранное, DOM инспектор и поддержка firebug.
* [http://monc.se/kitchen/stew/hsl/ Конвертор HSL в RGB]

==[[Спрайты]]==

http://www.spritecow.com/ — Онлайн-генератор CSS из картинки со спрайтами

==Формы==

* [http://www.accessify.com/tools-and-wizards/accessibility-tools/quick-form-builder/ Quick Form Builder] — Генерирует XHTML /HTML -совместимые и доступные формы с CSS разметкой. Вводим имена полей, затем выбираем типа каждого поля, формат( HTML или XHTML ) и получаем готовый HTML и CSS код формы.
* [http://wufoo.com/ Wufoo] — бесплатный онлайновый сервис, позволяющий с легкостью создавать хорошо выглядящие, валидные CSS/XHTML формы.

==Компоненты UI==

* [http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/ List-o-Matic] — Генерирует навигационные меню ( до 2 уровней), позволяя выбрать одно из нескольких доступных оформлений.
* [http://www.cssmenumaker.com/ CSS Menu Generator] — Генерирует горизонтальные, вертикальные, выпадающие CSS меню.
* [http://jqueryui.com/themeroller/ ThemeRoller] — Позволяет создавать собственные темы для jQuery UI.

==Обертка текста==

* [http://www.csstextwrap.com/ CSS Text Wrapper] — позволяет легко придать тексту любую форму и вставить к себе на страницу. Линиями задаем форму. Узловые точки добавляются по нажатию на линию в том месте где необходимо добавить. Можно настроить размеры блока, выравнивание, шрифт и т.д.
* [http://www.theboxoffice.be/ The Box Office] — Этот инструмент который позволит создать обтекание текста для картинок с различной неправильной формой. Просто вводите ссылку на любую картинку произвольной формы, задаете основное выравнивание изображения, цвет фона, который нужно игнорировать, высоту строки дополнительные отступы и цвет текста, а далее — идем за результатом.

==Анализ и Отладка==

* [http://jigsaw.w3.org/css-validator/ W3C CSS Validation Service] — Проверка CSS на валидность.<br/>
* [http://juicystudio.com/services/csstest.php CSS Analyzer] — сочетает W3C CSS Validation Service и дополнительную проверку цветов на контрастность (полезен для улучшения юзабилити) и единиц измерения, используемых в исходном коде. Результатом является очень подробное описание ошибок и предупреждений, точно так же как в W3C CSS Validation Service.
* [http://getfirebug.com/ Firebug] — расширение для браузера Firefox, являющееся консолью, отладчиком, и DOM-инспектором Javascript, DHTML, CSS, XMLHttpRequest. Firebug показывает в консоли вызвавшую ошибку функцию, стек вызовов функций, вызвавших эту ошибку. Он предупреждает, что CSS-правило или Javascript-метод/свойство, которое вы пытаетесь использовать, не существует.

==Сопровождение==

* [http://www.sitepoint.com/dustmeselectors/ Dust-Me Selectors] — Позволяет проанализировать страницу и показать, сколько и какие стили не используются на странице сайта, а также укажет в каком файле стилей, в какой строке они прописаны.
* [http://www.dotnetsurfers.com/Blog/2008/10/02/RemovingUnusedCSSClassesFromYourWebApplication.aspx CssCleaner] — Приложение Windows для удаления неиспользуемых CSS классов.
* [http://services.immike.net/css-checker/ CSS Redundancy Checker] — Проверяет, все ли правила из CSS используются в HTML. После проверки выводит список не использованных на данной странице или группе страниц.

== Оптимизация / CSS Minify ==

Здесь перечислены только минификаторы с настройками сжатия

* http://www.cssdrive.com/index.php/main/csscompressor/
* https://csscompressor.com/
* https://www.giftofspeed.com/css-compressor/

==Фоматирование==

* [http://www.cleancss.com/ CleanCSS – CSS Formatter and Optimizer] — популярный онлайн-инструмент для форматирования и оптимизации CSS. Содержит группы настроек для баланса между оптимизацией и читабельностью. Одна из важных возможностей – это автоматическое соединение одинаковых селекторов и свойств.
* [http://styleneat.com/ Styleneat] — преобразовывает код CSS в стандартизированный, удобный для чтения формат, структурирует таким образом, что становится легко понять где какие области и как они связаны друг с другом.
* [http://www.blumentals.net/csstool/ CSS Toolbox] — множество инструментальных средств для быстрой и эффективной разработки CSS – валидатор, форматтер, оптимизатор.

==Браузерозависимость==

* [http://www.conditional-css.com/ Conditional-CSS] — Парсер CSS файлов на строне сервера с проверкой на тип и версию браузера. Позволяет сформировать специальные условные комментарии для различных групп браузеров. Доступны версии на PHP, C# и С.
* [http://litmusapp.com/ Litmus] — обеспечивает проверку во всех основных браузерах, а также представляет отчет об ошибках, чтобы помочь вам идентифицировать и исправить любые ошибки. По завершении проверки, вы можете составить отчет о совместимости, чтобы представить его клиентам. Для бесплатного использования Litmus предлагается ограниченная версия.
* [http://www.webdevout.net/browser-support-css Web Browser CSS Support] — Подробная таблица поддержки CSS-стандарта популярными браузерами.
* [http://a.deveria.com/caniuse/ When Can I Use?] — Даёт возможность сравнить поддержку браузерами различных новейших технологий, а именно — HTML 5, CSS 3, SVG и т.д. Можно выбрать как определённые браузеры, временные периоды, статусы, так и определённые технологии.
* [http://code.google.com/p/ie7-js/ IE7.js] — Javascript библиотека, которая исправляет множество багов в HTML и CSS для версий Internet Explorer седьмой и ниже. К примеру, она исправляет поддержку прозрачности в PNG, фиксированное позиционирование элементов и фоновых изображений (position: fixed), поддержку псевдо класса: hover для всех тэгов и др.
* [http://www.modernizr.com/ Modernizr] — небольшая простая Javascript-библиотека, которая поможет использовать такие технологии, как CSS3, HTML5 в браузерах которые еще не поддерживают это технологии.

==Селекторы==

* [http://sizzlejs.com/ Sizzle Javascript Selector Library] — Быстрый Javascript движок выбора CSS селекторов. Sizzle поддерживает практически все CSS3 селекторы – даже такие редко используемые, как экранированные селекторы (”.foo\+bar”), юникодные селекторы и т.д.
* [http://gallery.theopalgroup.com/selectoracle/ SelectORacle] — Сервис дает описание на человеческом языке сложных селекторов CSS и может быть очень полезен при изучении оных.
* [http://developer.yahoo.com/yui/selector/ YUI Selector Utility] — позволяет использовать синтаксис CSS3 селекторов на Javascript, упрощая сбор, фильтрацию и тестирование HTML элементов.
* [http://developer.yahoo.com/yui/stylesheet/ YUI StyleSheet Utility] — С помощью StyleSheet Utility на лету создавать и модифицировать CSS стили.

==Разное==

* [http://www.westciv.com/xray/ XRAY] — букмарклет, который может демонстрировать разную полезную информацию о всех «внутренностях» страницы. В частности, размеры всех элементов, координаты их расположения, CSS-свойства, названия HTML тегов, соответствующих отображаемым блокам, и некоторые другие детали.

==Cheat Sheets==

* [http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/ CSS Cheat Sheet] — Одностраничный CSS cheat sheet перечисляющий все селекторы (CSS 2.1) и свойства. Включает картинку box-модели, единицы измерения CSS.
* [http://www.leigeber.com/2008/04/css-shorthand-cheat-sheet/ CSS Shorthand Cheat Sheet]
* [http://yuiblog.com/assets/pdf/cheatsheets/css.pdf YUI Library: CSS Reset, Base, Fonts, и Grids]
* [http://www.christianmontoya.com/2007/11/12/blueprint-css-cheat-sheet/ Blueprint CSS Cheat Sheet]

==За пределами CSS==

* [http://yellowgreen.de/morecss/ MoreCSS] — ориентированная на дизайнеров Javascript библиотека, которая позволяет писать код в CSS стиле для создания всплывающих окон, тултипов, меню на табах, таблиц «зебра», расширинных стилей списков и применения кросс-браузерной прозрачности.
* [http://lesscss.org/ LESS – Leaner CSS] — Less это Ruby gem, который расширяет CSS добавляя следующими возможностями: переменные, миксины, операции и вложенные правила. Достаточно переименовать .css файлы .less для получения всех этих возможностей.
* [http://code.google.com/p/dtcss/ DtCSS] — DtCSS – это PHP скрипт, который обрабатывает CSS файлы, позволяя использовать в них вложенные селекторы, цветовое смешение и т.д. DtCSS читает CSS файл со специальными инструкциями написанными для DtCSS, и выдает наружу обычный CSS. Имеется умная кэширующая система.

== Инструменты ==

* [http://csscomb.ru/online/ CSScomb] — сортировка CSS-свойств. Описание от автора: http://habrahabr.ru/post/149998/

== Использованы материалы==

[http://habrahabr.ru/blogs/webdev/69023/ здесь]

CSS tools - Історія редагувань

Romych: /* Оптимизация / CSS Minify */