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>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler