JavaScript библиотеки, которые расширяют возможности CSS

1 декабря 2009, 13:20 Павел Марковнин JavaScript рейтинг +26-

JavaScript библиотеки, которые расширяют возможности CSSПривет!

Сегодня мы рассмотрим не совсем обычные JS фреймворки. Их цель — принести в CSS немного больше функциональности и возможностей.

Приведу пример: вы знаете, что есть браузеры, которые поддерживают закругленные углы (свойство из CSS3), а есть те, которые не поддерживают это. Такое условие можно прописать непосредственно в CSS.

Или, скажем, нужно написать разные стили для пользователей шестого ослика под Маком — тоже не проблема.

Modernizr

Modernizr

Эта библиотека позволяет вам с помощью CSS-селекторов определять, поддерживает ли текущий браузер конкретные CSS3 свойства или нет, и писать соответствующие стили для современных браузеров и более старых версий.

.multiplebgs div p {
/* свойства для браузеров,
которые поддерживают множественные фоны */
} .no-multiplebgs div p {
/* и для тех, которые
не поддерживают */
}

Кроме того, с помощью этой библиотеки можно писать стили для тегов из HTML 5.

MoreCSS

MoreCSS

Эта библиотека добавляет в CSS некоторые возможности из JS — создание попапов, тултипов, более продвинутые и удобные свойства. Посмотрим на пример, чтобы понять, о чем речь.

tr.blue td {
background-color: #D0E3FF;
color: #FFFFFF;
}

/* MoreCSS */
#example_1 tr:every-second-child {
add-class: blue;
}

CSS Browser Selector

Про эту библиотеку я уже писал в статье про эффективный CSS. Она позволяет вам писать стили под конкретный браузер или ОС, ну или и под то и другое одновременно.

.win.chrome .example {
background-color: cyan;
}
Рекламное место, которое может стать вашим

Понравилась статья?

Тогда подпишись на обновления через RSS или воспользуйся
другими способами подписки.

Читать в Яндекс.Ленте Добавить в Google Добавить в Netvibes
  •  

Комментарии — 11

RSS
  • Аватарка
    1 декабря 2009 в 14:56 Андрей
    в первом особого смысла не вижу, а вот два последних хочу посмотреть) позже напишу свое мнение.
    И по теме - не знаете есть ли подобные библиотеки, позволяющие писать на CSS3 в браузерах не поддерживающих его?
  • Аватарка
    1 декабря 2009 в 17:49 ]]>mihdan]]>
    Неплохой, правда маленький обзор. Да и при отключеном javascript будет попа. Поэтому не вижу смысла в использовании данных библиотек.
  • Аватарка
    1 декабря 2009 в 21:54 yeap
    честно говоря, ни разу не видел отключенный js у юзеров. У гиков видел пару раз, но они и сайты при отключенных стилях смотрят.)

    Сколько таких % в рунете?
  • Аватарка
    2 декабря 2009 в 14:38 Антон
    Соглашусь с yeap, многие юзеры не просто не отключают js - они не знают что это такое и что это вообще можно отключать. Только интересно каково смотреть с отключенным css сайт, сверстанный дивами(то есть float отключен и все блоки идут друг под другом =))?. Неплохой обзор, спасибо, Павел. Первые два фреймворка не знаю куда применить, а последний хорош - буду осваивать.

    И по теме - не знаете есть ли подобные библиотеки, позволяющие писать на CSS3 в браузерах не поддерживающих его? =)
  • Аватарка
    2 декабря 2009 в 15:22 ]]>mihdan]]>
    Есть такой день - CSS nuked day. Девятого апреля, когда люди отключают css - стили от сайтов. Если свёрстано семантично, смотрится ничего.
  • Аватарка
    4 декабря 2009 в 15:58 ]]>Robotti]]>
    Спасибо за подборку!
    MoreCSS заинтересовал, надо будет в свободное время подробнее ознакомиться.
  • Аватарка
    7 декабря 2009 в 12:32 ]]>Aleksej Gordejev]]>
    Подборка интересная конечно. Спасибо!
  • Аватарка
    2 февраля в 10:03 ]]>Илларион]]>
    А как же всем известная библиотека jQuery? Вот на сегодняшний день - это самый распространённый и частоупотребляемый framework.
  • Аватарка
    10 февраля в 14:03 ]]>mihdan]]>
    yeap, я сам смотрю сайты при оключенных плагинах, скриптах и картинках, когда выхожу в интернет в деревне через GRPS или Dial-Up.
  • Аватарка
    14 февраля в 23:38 ]]>Albanec]]>
    JS библиотеки для css как-то не звучит.

  • Аватарка
    15 февраля в 2:05 Антон
    Блин, Albanec, чё за бред? не звучит твой ник. Люди решают свои проблемы при вёрстке javascript-ом чё тут звучать должно? Если тебе что-то не нравится, выкладывай свои "гениальные" идеи!
  • Эл. почта (используется для Граватарки)
  • Домашняя страница
  • Имя в Твиттере
  • Разрешенные теги Текст сообщения (надо бы заполнить это поле)
  • как выглядит какой тег
    жирный текст <b>жирный текст</b>
    курсивный тект <i>курсивный тект</i>
    зачеркнутый текст <s>зачеркнутый текст</s>
    подчеркнутый текст <u>подчеркнутый текст</u>
    ссылка <a href="адрес">ссылка</a>
    function foo() { ... }
    <pre><code>function foo() { ... } </code></pre>