Подборка примеров и ссылок по CSS. Список вопросов составлен на основе поисковых запросов.
* position:fixed в ie61
* прибивание футера2
* clear у блока float3
* скругление углов css4
* условные комментарии в css5
position:fixed в ie6
В iE6 position:fixed не работает, но если очень нужно, то заменить его можно с помощью position: absolute и expression вычисляющего положение элемента в зависимости от положения скрола.
#fixed-block {
position: fixed;
right: 2em;
top: 100px;
background: wheat;
padding: 1.5em 1.5em 1.5em 3em;
width: 15em;
}
* html {
background: fixed url('null.png');
}
* html #fixed-block {
position: absolute;
top: expression(eval(document.documentElement.scrollTop) + 100 + 'px');
}
пример6
Подробная статья про Полноценный fixed в MSIE7 есть в Техногрете, но обратите внимание, что в Standards Mode используется document.documentElement, а в Quirks Mode document.body.
прибивание футера
HTML
CSS
html {
height: 100%;
}
body {
min-height: 100%;
}
* html body {
height: 100%; /* замена min-height:100% для IE6 */
}
body {
position: relative; /* абсолютно позиционируемые элементы
будут располагаться относительно body */
}
#content {
padding-bottom: 7em; /* место для футера */
}
#footer {
position: absolute;
bottom: 0;
height: 7em;
width: 100%;
background: wheat;
}
пример8
Не работает в IE5. В IE6 футер не уходит на свое место, если размер страницы изменяется в результате работы JavaScript, например, если скрыты или добавлены некоторые элементы страницы.
Дополнено: В Opera 9.51 работает только если css подключен внешним файлом, если использовать для css элемент style то работает только с бубном, например, если взять одно слово на странице в. Проблема связана не столько с самим способом прибивания футера, сколько с особенностями min-height: 100% в Opera 9.51, во втором способе, на который ссылка ниже, она тоже есть.
Еще один способ прибивания футера9.
clear у блока float (+ миллион вариантов запроса)
Часто нужно заставить родительский блок полностью поглощать вложенные float блоки, для этого можно использоваться следующие стили:
#block {
overflow: hidden; /* для всех браузеров */
/* для IE */
height: 1%;
/* или */
zoom: 1;
}
Если у родительского блока задана высота то height: 1% не подойдет, у zoom: 1 проблема только в том, что это нестандартное свойство, если важна валидность нужно вынести в отдельный файл для IE.
Этому действу не имеющему приемлемого русского названия посвящена статья Clear для плавающих блоков10 подробнее о float и связанных с ним багами можно почитать в статье CSS Float в теории и на практике11.
скругление углов css (второй по количеству вариантов запрос)
Видимо на этот вопрос найдется не меньше миллиона ответов.
* Более 50 методов закругления углов (eng)12
* 38 способов скругления блоков13
* Я писал про закругление без изображений14, Dimox добавил к нему сглаживание15.
условные комментарии в css
Условные комментарии16 привилегия HTML, чаще всего применяются для того, чтобы сделать CSS файл видимым только для определенной версии Internet Explorera, например для IE6:
среда, 17 декабря 2008 г.
Частые вопросы о CSS
Прогрессивное улучшение и CSS
Организация стилей
Большинство веб-разработчиков не задумываются о том, как они подключают стили к документу, на самом деле это целое искусство. Используя правильные методы, вы автоматически получите многие из преимуществ прогрессивного улучшения.
Использование нескольких файлов стилей
Очевидно, что файлы стилей содержащие больше 1500 строк сложно поддерживать и разделение может упростить работу с ними. Другое преимущество, о котором не всегда вспоминают, заключается в том, что разделение позволяет лучше управлять представлением для различных устройств, которые мы собираемся поддерживать.
Возьмем файл main.css, содержащий все стили для вашего сайта и разделим его на несколько файлов содержащих типографику, разметку, цветовую информацию, назовем их соответственно: type.css, layout.css, color.css.
Разделение общего файла стилей на несколько контекстных
Теперь, не прикладывая сколь либо значительных усилий, мы можем показать упрощенную версию страницы в браузерах плохо поддерживающих CSS или очень старых браузерах (таких как Internet Explorer 5/Mac). Как? Вся хитрость в том, как мы подключаем файлы. Перед тем как мы начали вносить изменения, единственный файл main.css подключался с помощью элемента link следующим образом:
#link rel="stylesheet" type="text/css" href="main.css" /#
Потом мы разделили его на три файла подключаемых индивидуально:
#link rel="stylesheet" type="text/css" href="type.css" /#
#link rel="stylesheet" type="text/css" href="layout.css" /#
#link rel="stylesheet" type="text/css" href="color.css" /#
В прошлом многие из нас использовали media="screen,projection" чтобы скрыть от Netscape 4.x файл с разметкой, я покажу способ лучше. Но прежде давайте обратим внимание на альтернативные медиа типы.
Альтернативные медиа типы
Поскольку прогрессивное улучшение сфокусировано на контенте и мы хотим показать его лучшим образом на всех устройствах где это возможно, нужно думать не только о браузерах, но и о печати и мобильных устройствах.
К несчастью, рынок мобильных устройств все еще очень фрагментирован и незрел (не заставляйте меня меня вспоминать о мобильных браузерах, думающих, что они должны использовать стили для устройства screen). Благодаря этому, обсуждение всех деталей использования прогрессивного улучшения для мобильных устройств, требует как минимум нескольких статей, а может и целой книги. Но не отчаивайтесь: умные люди уже начали собирать ресурсы2 призванные помочь3 в разработке для мобильных устройств, мы же пока сфокусируемся на печати.
Обычно стили для печати подключаются отдельным файлом с помощью элемента link:
#link rel="stylesheet" type="text/css" media="print" href="print.css" /#
А файл print.css содержит все стили, используемые в версии для печати, включая типографику и цветовое оформление. В большинстве случаев для печати используются точно такие же, как в главном файле стилей, правила типографики и, возможно, некоторые другие правила, другими словами много кода будет дублироваться. Поэтому отделение типографики и цветовой схемы от разметки отличная идея, нам больше не нужно будет дублировать типографику в стилях для печати. Ну и конечно разделение позволяет нам лучше приспособить сайт для работы в проблематичных браузерах.
Выше мы уже пришли к следующему способу подключения стилей:
#link rel="stylesheet" type="text/css" href="type.css" /#
#link rel="stylesheet" type="text/css" href="layout.css" /#
#link rel="stylesheet" type="text/css" href="color.css" /#
Теперь посмотрим, что можно сделать, чтобы адаптировать сайт к работе в старых браузерах.
Поскольку мы не указали медиа типы, Netscape 4.x будет видеть стили во всех трех файлах, чтобы избежать этого, воспользуемся его слабым пониманием CSS. Для лучшей организации CSS переместим стили из файла layout.css в новый файл screen.css, а в layout.css подключим его с помощью директивы @import, поскольку NS4.x не поддерживает эту директиву, стили, отвечающие за разметку, будут от него надежно скрыты.
@import 'screen.css';
Остается указать, для какого устройства предназначены эти стили:
@import 'screen.css' screen;
Проблема этой записи в том, что IE до седьмой версии включительно, не понимаеет такой синтаксис и игнорирует, подключаемые, стили. Преодолеть эту проблему нам помогут условные комментарии.
Поскольку IE5/Mac плохо поддерживает CSS, особенно плавающие блоки и позиционирование, лучше полностью скрыть от него стили, отвечающие за разметку. Чтобы сделать это достаточно использовать для имен файлов одинарные ('), а не двойные (") кавычки. При этом типографика и цветовая схема могут быть сохранены.
Тот же самый прием мы используем для подключения файла print.css (который как нетрудно догадаться содержит стили для печати).
@import 'screen.css' screen;
@import 'print.css' print;
Теперь у нас не только хорошо организованны стили, но и эффективно задействовано прогрессивное улучшение.
Взаимосвязь файлов стилей
Вопрос на 10 мегадолларов: что делать с IE6?
Для многих разработчиков, Internet Explorer 6 — это новый Netscape 4, он является постоянным источником проблем, и верстальщики с нетерпением ждут того момента когда он окончательно покинет рынок браузеров.
Опустим здесь негодования по поводу проблем в IE6, они хорошо документированы4 и многие из них легко преодолимы, тем более, что переход на IE7 происходит достаточно быстро (особенно среди индивидуальных пользователей), а IE8 уже в стадии беты, и день когда мы сможем сказать «пока, IE6» все ближе.
Отличный инструмент для реализации прогрессивного улучшения внедрен Microsoft еще в IE5, он называется: условные комментарии5. Это замечательное изобретение позволяет нам не только скрыть часть разметки от остальных браузеров, но и точно указать для каких версий IE она должна быть видима.
Как приверженцы веб стандартов мы должны начинать тестирование в наиболее соответствующем стандартам браузере, и только потом в тех, к которым нужно принимать дополнительные меры. Конечно, у каждого разработчика индивидуальный подход, но я стараюсь каждый проект начинать со стандартного набора файлов:
* type.css
* layout.css
* screen.css
* print.css
* color.css
Потом в зависимости от требований проекта, я добавляю отдельные файлы для некоторых браузеров, в большинстве случаев это ie7.css и ie6.css, если проект требует поддержки более старых версий IE то создается соответствующий файл (например, ie5.5.css).
Тестирование CSS я всегда начинаю в Mozilla Firefox, поскольку при написании CSS использую Edit CSS сайдбар. После того как написаны все стили, я начинаю тестирование в других браузерах. В браузерах хорошо поддерживающих стандарты, редко возникают какие либо проблемы. В IE7 в большинстве случаев, проблем не так уж много, но иногда нужно включить hasLayout6 или исправить какой нибудь небольшой баг разметки. В этом случае, я добавляю необходимые для этого правила в ie7.css и подключаю его к документу, используя при этом условные комментарии:
Такой условный комментарий позволяет подключать этот стиль только для IE версии меньшей либо равной (lte) 7. Это значит, что если кто-то зайдет на страницу из IE7, то исправления будут работать, но если он зайдет из новой версии, в которой проблема вероятно уже исправлена, файл с этими правилами будет проигнорирован.
С другой стороны, если кто-то зайдет на страницу из IE6, исправления из файла для IE7 будут задействованы и это правильно, поскольку, ошибки которые есть IE7 скорее всего есть и в IE6. Хороший пример такой ошибки это непонимание директивы @import с указанным медиа типом, которое исправляется добавлением директивы @import ' screen.css' в начале файле ie7.css без указания медиа типа, которая подключит недостающий файл.
После того как внесены все исправления необходимые для IE7, я открываю IE6 и смотрю не нужна ли ему помощь в отображении этой страницы, если такая необходимость есть, то я добавляю в документ еще один условный комментарий, в котором подключается файл ie6.css.
Стили из файла ie6.css будут работать в IE6 и ниже, и игнорироваться в IE7 и старших версиях.
Использование условных комментариев позволяет легко разделить стили для различных браузеров и избежать использования CSS хаков.
Большинство веб-разработчиков не задумываются о том, как они подключают стили к документу, на самом деле это целое искусство. Используя правильные методы, вы автоматически получите многие из преимуществ прогрессивного улучшения.
Использование нескольких файлов стилей
Очевидно, что файлы стилей содержащие больше 1500 строк сложно поддерживать и разделение может упростить работу с ними. Другое преимущество, о котором не всегда вспоминают, заключается в том, что разделение позволяет лучше управлять представлением для различных устройств, которые мы собираемся поддерживать.
Возьмем файл main.css, содержащий все стили для вашего сайта и разделим его на несколько файлов содержащих типографику, разметку, цветовую информацию, назовем их соответственно: type.css, layout.css, color.css.
Разделение общего файла стилей на несколько контекстных
Теперь, не прикладывая сколь либо значительных усилий, мы можем показать упрощенную версию страницы в браузерах плохо поддерживающих CSS или очень старых браузерах (таких как Internet Explorer 5/Mac). Как? Вся хитрость в том, как мы подключаем файлы. Перед тем как мы начали вносить изменения, единственный файл main.css подключался с помощью элемента link следующим образом:
#link rel="stylesheet" type="text/css" href="main.css" /#
Потом мы разделили его на три файла подключаемых индивидуально:
#link rel="stylesheet" type="text/css" href="type.css" /#
#link rel="stylesheet" type="text/css" href="layout.css" /#
#link rel="stylesheet" type="text/css" href="color.css" /#
В прошлом многие из нас использовали media="screen,projection" чтобы скрыть от Netscape 4.x файл с разметкой, я покажу способ лучше. Но прежде давайте обратим внимание на альтернативные медиа типы.
Альтернативные медиа типы
Поскольку прогрессивное улучшение сфокусировано на контенте и мы хотим показать его лучшим образом на всех устройствах где это возможно, нужно думать не только о браузерах, но и о печати и мобильных устройствах.
К несчастью, рынок мобильных устройств все еще очень фрагментирован и незрел (не заставляйте меня меня вспоминать о мобильных браузерах, думающих, что они должны использовать стили для устройства screen). Благодаря этому, обсуждение всех деталей использования прогрессивного улучшения для мобильных устройств, требует как минимум нескольких статей, а может и целой книги. Но не отчаивайтесь: умные люди уже начали собирать ресурсы2 призванные помочь3 в разработке для мобильных устройств, мы же пока сфокусируемся на печати.
Обычно стили для печати подключаются отдельным файлом с помощью элемента link:
#link rel="stylesheet" type="text/css" media="print" href="print.css" /#
А файл print.css содержит все стили, используемые в версии для печати, включая типографику и цветовое оформление. В большинстве случаев для печати используются точно такие же, как в главном файле стилей, правила типографики и, возможно, некоторые другие правила, другими словами много кода будет дублироваться. Поэтому отделение типографики и цветовой схемы от разметки отличная идея, нам больше не нужно будет дублировать типографику в стилях для печати. Ну и конечно разделение позволяет нам лучше приспособить сайт для работы в проблематичных браузерах.
Выше мы уже пришли к следующему способу подключения стилей:
#link rel="stylesheet" type="text/css" href="type.css" /#
#link rel="stylesheet" type="text/css" href="layout.css" /#
#link rel="stylesheet" type="text/css" href="color.css" /#
Теперь посмотрим, что можно сделать, чтобы адаптировать сайт к работе в старых браузерах.
Поскольку мы не указали медиа типы, Netscape 4.x будет видеть стили во всех трех файлах, чтобы избежать этого, воспользуемся его слабым пониманием CSS. Для лучшей организации CSS переместим стили из файла layout.css в новый файл screen.css, а в layout.css подключим его с помощью директивы @import, поскольку NS4.x не поддерживает эту директиву, стили, отвечающие за разметку, будут от него надежно скрыты.
@import 'screen.css';
Остается указать, для какого устройства предназначены эти стили:
@import 'screen.css' screen;
Проблема этой записи в том, что IE до седьмой версии включительно, не понимаеет такой синтаксис и игнорирует, подключаемые, стили. Преодолеть эту проблему нам помогут условные комментарии.
Поскольку IE5/Mac плохо поддерживает CSS, особенно плавающие блоки и позиционирование, лучше полностью скрыть от него стили, отвечающие за разметку. Чтобы сделать это достаточно использовать для имен файлов одинарные ('), а не двойные (") кавычки. При этом типографика и цветовая схема могут быть сохранены.
Тот же самый прием мы используем для подключения файла print.css (который как нетрудно догадаться содержит стили для печати).
@import 'screen.css' screen;
@import 'print.css' print;
Теперь у нас не только хорошо организованны стили, но и эффективно задействовано прогрессивное улучшение.
Взаимосвязь файлов стилей
Вопрос на 10 мегадолларов: что делать с IE6?
Для многих разработчиков, Internet Explorer 6 — это новый Netscape 4, он является постоянным источником проблем, и верстальщики с нетерпением ждут того момента когда он окончательно покинет рынок браузеров.
Опустим здесь негодования по поводу проблем в IE6, они хорошо документированы4 и многие из них легко преодолимы, тем более, что переход на IE7 происходит достаточно быстро (особенно среди индивидуальных пользователей), а IE8 уже в стадии беты, и день когда мы сможем сказать «пока, IE6» все ближе.
Отличный инструмент для реализации прогрессивного улучшения внедрен Microsoft еще в IE5, он называется: условные комментарии5. Это замечательное изобретение позволяет нам не только скрыть часть разметки от остальных браузеров, но и точно указать для каких версий IE она должна быть видима.
Как приверженцы веб стандартов мы должны начинать тестирование в наиболее соответствующем стандартам браузере, и только потом в тех, к которым нужно принимать дополнительные меры. Конечно, у каждого разработчика индивидуальный подход, но я стараюсь каждый проект начинать со стандартного набора файлов:
* type.css
* layout.css
* screen.css
* print.css
* color.css
Потом в зависимости от требований проекта, я добавляю отдельные файлы для некоторых браузеров, в большинстве случаев это ie7.css и ie6.css, если проект требует поддержки более старых версий IE то создается соответствующий файл (например, ie5.5.css).
Тестирование CSS я всегда начинаю в Mozilla Firefox, поскольку при написании CSS использую Edit CSS сайдбар. После того как написаны все стили, я начинаю тестирование в других браузерах. В браузерах хорошо поддерживающих стандарты, редко возникают какие либо проблемы. В IE7 в большинстве случаев, проблем не так уж много, но иногда нужно включить hasLayout6 или исправить какой нибудь небольшой баг разметки. В этом случае, я добавляю необходимые для этого правила в ie7.css и подключаю его к документу, используя при этом условные комментарии:
Такой условный комментарий позволяет подключать этот стиль только для IE версии меньшей либо равной (lte) 7. Это значит, что если кто-то зайдет на страницу из IE7, то исправления будут работать, но если он зайдет из новой версии, в которой проблема вероятно уже исправлена, файл с этими правилами будет проигнорирован.
С другой стороны, если кто-то зайдет на страницу из IE6, исправления из файла для IE7 будут задействованы и это правильно, поскольку, ошибки которые есть IE7 скорее всего есть и в IE6. Хороший пример такой ошибки это непонимание директивы @import с указанным медиа типом, которое исправляется добавлением директивы @import ' screen.css' в начале файле ie7.css без указания медиа типа, которая подключит недостающий файл.
После того как внесены все исправления необходимые для IE7, я открываю IE6 и смотрю не нужна ли ему помощь в отображении этой страницы, если такая необходимость есть, то я добавляю в документ еще один условный комментарий, в котором подключается файл ie6.css.
Стили из файла ie6.css будут работать в IE6 и ниже, и игнорироваться в IE7 и старших версиях.
Использование условных комментариев позволяет легко разделить стили для различных браузеров и избежать использования CSS хаков.
Подписаться на:
Сообщения (Atom)
