CSS Crunch: нове розширення до IE для розробників, Різне, Інтернет-технології, статті

Сьогодні існує безліч інструментів, що дозволяють налаштовувати таблиці каскадних стилів (CSS) для сторінок сайту, але далеко не всі, які роблять протилежне – сканують документ на наявність правил CSS і видаляють невикористовувані. Очищення CSS не тільки звільняє смугу пропускання, але і збільшує продуктивність браузера (зводячи до мінімуму час, що витрачається движком CSS на аналіз таблиць стилів).


У сьогоднішній статті я розповім про те, як створити такий інструмент за допомогою букмарклет і нової стандартної функції, що дебютувала в Internet Explorer 8: document.querySelectorAll().


Давайте почнемо з основ: веб-сторінка може включати цілий ряд таблиць каскадних стилів, кожна з яких складається з одного або декількох селекторів. Наприклад, такими селекторами є # elementId { },. ClassName {} і body {}. За допомогою функції querySelectorAll () ви можете програмним шляхом проінспектувати дерево DOM і підрахувати кількість повторень того чи іншого селектора.


Так, наприклад, наступний фрагмент коду рахує кількість разів, коли в документі зустрічається клас Foo:


var selectorCount = document.querySelectorAll(“.Foo”).length;


Дізнавшись це, потрібно визначити спосіб для запуску цього сценарію всередині документа. Я не став змінювати серверний код.


Я вирішив створити букмарклет, що є спеціальним посиланням, яка може динамічно взаємодіяти із завантаженою сторінкою. Синтаксис букмарклет досить простий:


<a href=”javascript:( 
function() {
var c = document.createElement(“script”);
c.type = “text/javascript”;
c.src = “http://demos.cloudapp.net/IE/CssCrunch/Scripts/CssCrunch.js”;
document.getElementsByTagName(“head”)[0].appendChild(c); })();”>
CSS Crunch
</a>

Як бачите, в момент виконання відбувається впровадження віддаленого файлу зі сценарієм, який здійснює аналіз і висновок результату.



Якщо прокрутити до самого низу списку правил CSS, ви побачите опцію тимчасового видалення невживаних селекторів. Це дозволить вам протестувати, чи є зміни в зовнішньому вигляді і поведінці сторінки, як показано на знімку нижче.


CSSCrunch being used to remove the unused style rules

Хотілося б особливо підкреслити, що метою є не досягнення 100% використання правил CSS на будь-якій сторінці; Є сценарії, в яких одна таблиця стилів може використовуватися декількома сторінками одночасно, і має сенс робити попередню вибірку певного правила. Замість цього слід використовувати даний інструмент для пошуку областей можливого поліпшення.


От і все! Ви можете оцінити розширення тут:



  1. Клацніть правою кнопкою на Run CSSCrunch і виберіть “Додати до Обраного”
  2. Підтвердіть свою згоду в діалозі безпеки (за замовчуванням будь букмарклет вважається небезпечним у зв’язку зі своєю природою)
  3. Виберіть розташування (наприклад, панель обраного)
  4. Тепер перейдіть до тестової сторінці (або будь-якого іншого сайту) і виберіть “CSS Crunch” в панелі вибраного.

Це лише початок. Якщо ви хочете дізнатися більше, то можете знайти вихідний код тут. Рекомендую вам поглянути на код і налаштувати його під свої потреби. Наприклад, можна додати підтримку багатосторінкового аналізу або інтеграцію з такими інструментами, як Visual Studio або IIS, або ж можливості стиснення зразок Microsoft Ajax Minifier.


Отже, час почати! Зараз я перевірю CSS-и цього блогу …

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*