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

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;
}

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

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

Андрей
в первом особого смысла не вижу, а вот два последних хочу посмотреть) позже напишу свое мнение.
И по теме - не знаете есть ли подобные библиотеки, позволяющие писать на CSS3 в браузерах не поддерживающих его?
#
Андрей  
mihdan
Неплохой, правда маленький обзор. Да и при отключеном javascript будет попа. Поэтому не вижу смысла в использовании данных библиотек.
yeap
честно говоря, ни разу не видел отключенный js у юзеров. У гиков видел пару раз, но они и сайты при отключенных стилях смотрят.)

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

И по теме - не знаете есть ли подобные библиотеки, позволяющие писать на CSS3 в браузерах не поддерживающих его? =)
#
Антон
mihdan
Есть такой день - CSS nuked day. Девятого апреля, когда люди отключают css - стили от сайтов. Если свёрстано семантично, смотрится ничего.
Robotti
Спасибо за подборку!
MoreCSS заинтересовал, надо будет в свободное время подробнее ознакомиться.
Aleksej Gordejev
Подборка интересная конечно. Спасибо!
Илларион
А как же всем известная библиотека jQuery? Вот на сегодняшний день - это самый распространённый и частоупотребляемый framework.
mihdan
yeap, я сам смотрю сайты при оключенных плагинах, скриптах и картинках, когда выхожу в интернет в деревне через GRPS или Dial-Up.
Albanec
JS библиотеки для css как-то не звучит.

Антон
Блин, Albanec, чё за бред? не звучит твой ник. Люди решают свои проблемы при вёрстке javascript-ом чё тут звучать должно? Если тебе что-то не нравится, выкладывай свои "гениальные" идеи!
#
Антон
Гриша
Прежде чем использовать какие то новые возможности javacsript, не плохо убедится, а поддерживаются ли эти возможности данным браузером. Хороший фреймворк для определения возможностей браузера has.js. Небольшое описание есть тут: Определение возможностей JavaScript с помощью has.js
interpaul
Пользуюсь Modernizr для прогрессивного улучшения. Если браузер умеет отображать, например, css-columns, даю ему стили с CSS3 свойствами для колонок. Если нет — стили для более простой верстки. Причем мне не надо заботиться под какой браузер или ОС я пишу. В этом основное преимущество по сравнению с CSS Browser Selector.
#
interpaul  

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
counter strike mt2 silkroad pvp metin2 metin2 pvp knight pvp gm olarak başlayan pvpler pvp silkroad pvp serverler counter strike serverler msn show cam show görüntülü sohbet oyunlar suskunlar gazete oku