CSS для разных версий IE в одной таблице стилей с помощью условных комментариев.

19 комментариев 26 мая 2010, Написано в CSS

Если вы используете условные комментарии для IE и вам не хотелось бы подключать несколько файлов, есть простой способ, позволяющий использовать одну общую таблицу стилей, в т.ч. для разных версий IE.

Вместо того, чтобы подключать дополнительные таблицы стилей, необходимо с помощью условных комментариев добавить внешний div.

<!--[if IE 6]>
<div id="ie6">
<![endif]-->
    <div id="wrap">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
<!--[if IE 6]>
</div>
<![endif]-->

Теперь чтобы переопределить какое-либо свойство для IE6, нужно добавить в селектор #ie6.

#wrap { … } /* Общее правило */ 
#ie6 #wrap { … } /* Правило для IE6 */

UPD: Т.к. народ реагирует не совсем адекватно, внесу ясность. Я не призываю вас везде использовать данное решение. Сам я как использовал отдельные таблицы стилей так и буду. Это всего лишь еще один возможный вариант применения условных комментариев.

Метки: , ,

Шпаргалка по «безопасным» шрифтам

12 комментариев 23 апреля 2010, Написано в Дизайн

Шпаргалка по «безопасным» шрифтам

  • PNG (2.39Мб)
  • PDF (9.76Мб)

Метки: , ,

Оформление страниц в зависимости от ширины экрана с помощью CSS3

4 комментария 22 апреля 2010, Написано в CSS

В настоящее время, для того чтобы поменять что-либо на странице при различных разрешениях, используется javascript. С приходом CSS3 сделать это станет гораздо проще благодаря CSS3 Media Queries.

Media Queries дают возможность применять различные CSS стили в зависимости от возможностей устройства на котором просматривается страница.

В частности, чтобы применить особое оформление в случае, если ширина экрана например меньше или равна 1000px, нужно использовать следующую конструкцию:

@media screen and (max-width:1000px) {
    /* Стили при ширине экрана <= 1000px */
}

Для наглядности откройте демо и попробуйте изменить размер окна.

Демо

Media Queries поддерживаются Webkit-браузерами, Opera и Firefox начиная с версии 3.5. Internet Explorer к сожалению данную возможность не поддерживает и не известно будет ли поддержка в 9-й версии. В Internet Explorer 9 (Second Preview) появилась таки поддержка CSS3 Media Queries.

Метки:

jQuery: Сворачиваемые блоки

51 комментарий 12 февраля 2010, Написано в Javascript

Небольшой пример демонстрирующий эффект сворачивания однотипных блоков (например постов в блоге или виджетов в сайдбаре) с помощью jQuery.

Перейти к статье…

Метки: , ,

Результаты: Используете ли вы CSS3?

11 комментариев 6 февраля 2010, Написано в CSS

Голосование по поводу использования CSS3 закончилось и судя по результатам, половина проголосовавших уже использует те возможности, которые присутствуют в современных браузерах.

Используете ли вы CSS3?

И это не удивительно. Новые возможности делают процесс разработки намного проще и быстрее. Конечно использовать новые свойства в коммерческих проектах ещё рано, но поэкспериментировать и использовать некоторые из них, например на своём блоге, вы можете уже сейчас. На данный момент наибольшая поддержка CSS3 присутствует в Safari/Chrome и Firefox, однако пишут, что в новой версии Opera 10.50 также будут реализованы некоторые возможности. Перейти к статье…

Метки: ,

«12345»...Последняя »