Последние несколько месяцев я увлекался увлекательным проектом, и теперь он наконец-то увидит свет! Он называется CSSUtilities и представляет собой специализированную библиотеку JavaScript для запросов таблиц стилей CSS .
Возможно, наиболее уникальным в этом является то, что он может дать вам информацию о ненормализованных свойствах — другими словами, вы можете получить цвета и размеры, которые применяются к элементу в исходной единице, с которой они были указаны , а не к нормализованным значениям, которые вы получаете из встроенных методов запросов, таких как getComputedStyle или даже из интерфейса CSSStyleSheet .
Существует множество примеров этого во всех браузерах, но можно привести несколько: Firefox нормализует большинство значений цвета в RGB , когда вы могли изначально определить их в шестнадцатеричном или в виде имен цветов; Опера нормализует цвета до 6-значного гексагона ; Internet Explorer разделяет свойства margin
Но когда вы работаете с библиотекой CSSUtilities, вы получаете именно то, что было указано , и это позволяет работать с динамическими стилями способом, который ранее был невозможен — например, когда вы читаете ширину элемента вы всегда получаете значение в pxem%
Некоторые другие вещи, которые он может сделать, включают: перечисление всех правил, которые применяются к указанному элементу, указание свойств, которые он наследует, или носитель, к которому они применяются, или специфика любого селектора. Он может рассказать вам практически все, о каждом правиле в каждой таблице стилей.
Я надеюсь, что многие найдут его полезным и породит разработку некоторых новых и интересных приложений и инструментов; Я сделал несколько демонстраций, которые вы можете посмотреть на http://www.brothercake.com/scripts/cssutilities … возможно, они вдохновят вас попробовать что-нибудь!
И на самом деле вы уже можете увидеть CSSUtilities в дикой природе, потому что предварительная версия поддерживает интерфейс проверки CSS в CodeBurner для Adobe AIR , Opera Widgets и Mac OS X Dashboard . Их способность извлекать и анализировать таблицы стилей, перечислять их правила и предоставлять вам информацию о свойствах и селекторах каждого из них — все эти функции работают на CSSUtilities, и это единственное, что делает это возможным — просто больше ничего нет доступен непривилегированный код, который может выполнять ту же работу.
Единственная причина, по которой Firebug может дать вам эту информацию, заключается в том, что он может вызвать класс dom-utilities Firefox, чтобы сообщить ему правила, применимые к проверяемому элементу, но, конечно, он доступен в Firefox только для привилегированных сценариев, таких как надстройки. (и это все еще нормализованные данные, не обязательно те, которые изначально указывал автор). Одна из демонстраций, которые я сделал, — это Live CSS Inspector , который излагает правила в похожем формате; и это работает во всех браузерах — даже IE6 !
Поэтому, пожалуйста, проверьте это … просмотрите демоверсии … дайте нам знать, что вы думаете (или если вы обнаружите какие-либо ошибки … надеюсь, вряд ли, но всегда возможно!). Но больше всего мне бы очень хотелось услышать ваши идеи по поводу любых инструментов или приложений, которые могли бы его использовать. Признаюсь, я очень взволнован возможностями; Мне не было так весело с DOM CSS с тех пор, как появился querySelectorAll