?спользование условных комментариев вместо хака "* html", пишем всю таблицу стилей в одном файле
Разработчики IE7 исправили глюк на котором основан хак "* html" поэтому его можно использовать только для отделения стилей для ie версии 6 и младше. Но для вёрстки очень часто бывает нужен метод отделения стилей для ie всех версий.
В сети достаточно описаны способы загрузить дополнительный .css файл для ie используя условные комментарии. Мне этот метод кажется не очень удобным из-за того, что стили, которые относятся к одному объекту, получаются разнесены на несколько файлов и редактировать их не удобно.
Вместо этого я предлагаю открывающийся тэг body заменить на
А для отделения стилей относящихся только к ie испольовать класс ".ie"
Например:
test
Этот блок будет зелёным только в IE.
Вы можете посмотреть описанный пример в действии.
Александр Куликов, Студия 908.
Мне кажется это не очень удобно будет. Например, такие моменты когда нужно подправит margins и paddings для IE, я подключаю отдельный CSS-стиль для IE в + !important.
head
style
body { padding: 10px !important;
/style>
/head
Скобки я намеренно тут опустил (чтобы движок не обрезал теги). Мне кажется так намного удобнее.
2006-07-11 at 4:20 pm
Это еще не удобно тем что при верстке XSL, такие хаки не пройдут, т.к. будет не валидный код, или придеться еще и закрывающие теги так же писать
2006-07-11 at 4:31 pm
А IE 7 поддерживает дочерние селекторы или селекторы аттрибутов? Если нет, то по-прежнему можно легко обойтись одной таблицей стилей…
2006-07-11 at 4:59 pm
Проше разбить css-файлы.
Велосипед тут изобретать не к чему.
2006-07-11 at 6:40 pm
Я разбиваю на два файла (основной и для MSIE) из-за cursor: hand, на который ругается FF 1.5 на консоли.
2006-07-12 at 10:58 am
у cursor нет значения “hand”, есть значение “pointer”.
2006-07-13 at 6:01 am
> у cursor нет значения “hand”, есть значение “pointer”.
Спасибо, я знаю. Ещё я знаю, что есть MSIE5, который не знает, что у cursor нет значения pointer и думает, что у него есть значение hand.
2006-07-13 at 4:34 pm
Уважаемые господа, вот читаю я такие статьи и не понимаю, это что такой особый стиль крутизны писать подобные конструкции? ?ли все эти примеры расчитаны на использование на narod.ru где есть только голый html? Есть куча простых и эффективных способов сделать для каждого броузера свой css файл и даже свою верстку не используя эти странные конструкции вроде условных комментариев или всяких там хаков?
?ли я чего-то не понимаю в этой жизни?
2006-07-13 at 8:42 pm
> Есть куча простых и эффективных способов сделать для каждого броузера свой
> css файл и даже свою верстку не используя эти странные конструкции вроде
> условных комментариев или всяких там хаков?
верстка для различных браузеров не есть good. вы видимо Джефри Зельдмана не читали. отделная вёрстка для каждого из браузеров – это огромный шаг назад. исользование хаков лучше чем сопровождение двух(трёх, четырёх и т.д.) версий сайта.
2006-07-14 at 12:09 pm
>> Есть куча простых и эффективных способов сделать для каждого броузера свой css файл и даже свою верстку
Предположим есть статичный сайт и на нём где-то около 200 страничек… Вы предлагаете их увеличить минимум до 800?
2006-07-15 at 7:48 am
>верстка для различных браузеров не есть good. вы видимо Джефри Зельдмана не читали. отделная вёрстка для каждого из браузеров – это огромный шаг назад. исользование хаков лучше чем сопровождение двух(трёх, четырёх и т.д.) версий сайта.
Хм. А я всегда считал, что наоборот. Потому как “сделать страничку чтоб во всез броузерах одинаково выглядела”, не более чем понты. Стеделать два дизайна шаблонов всегда гораздо быстрее чем один, но работающий везде. ? поддержка тоже значительно упрощается.
>Предположим есть статичный сайт и на нём где-то около 200 страничек… Вы предлагаете их увеличить минимум до 800?
?нтересно было бы посмотреть на статический сайт в 200 страничек ;) ? на, того, кто его сверстал еще больше. Ну да ладно. Пусть даже и так, а почему уведичивать его нужно до 800? Это что 600 вариантов дизайна что-ли делать. Вообще то достаточно увеличить на 1 файл. Ну в особо тяжелых случаях на 3-4 файла.
2006-07-15 at 10:18 pm
>Хм. А я всегда считал, что наоборот. Потому как “сделать страничку чтоб во всез броузерах одинаково выглядела”, не более чем понты. Стеделать два дизайна шаблонов всегда гораздо быстрее чем один, но работающий везде. ? поддержка тоже значительно упрощается.
Гм. Есть мнение.
Два дизайна шаблонов (жалкий минимум кстати) может привести к появлению двух разных языков для двух разных браузеров. Нахрена? Уже черт знает когда нетшкаф имел разные с эксплорером теги, что дальше? Хорошо было? Вместо одной строчки из 4 пар слов имеем строчку на 8. Поддержка чего упрощается? Каким местом? Ага, а теперь еще и два разных шаблона, потом два разных сервера чтоли? Расстрелять!
2006-07-18 at 1:35 pm
Хм. мой опыт мне подсказывает, что в 99% случаев все изменения в шаблонах для разных броузеров сводятся просто к написанию нескольких стилевых файлов. Что в конечном случае гораздо проще, чем пытаться втиснуть в один файл, путем использовапния всяких хаков, всего, что может понадобиться для разных броузеров. Тем более, если в странице есть javascript, то почти всегд а приходится либо писать по две версии скрипта, либо вставлять кучу проверок на броузеры. Так что хаками и условными комментариями проблема не снимается, а наоборот усугубляется.
Это как csssengarden. Якобы разделенный дизайн и контент, хотя на самом деле это не так. Но все почему-то себя упорно обманывают.
2006-07-18 at 11:43 pm
Мне почему-то не приходится писать по две версии скрипта и проверок на браузеры делать тоже не приходится. Максимум проверка на Quirks Mode.
2006-07-20 at 11:12 am
насчёт курсора
вот так писать нужно, последовательно
{…cursor:pointer;cursor:hand;…}
2006-07-25 at 10:34 am
Yahen, уважаемый, а Вам, судя по всему, верстать не часто приходилось!
Разве браузера у нас только два? Давайте созададим по одному варианту верстки для каждого браузера.
Один для FF, другой для IE 4, +1 для IE 5 (и один надо не забыть для IE 5.5) ну и по штучке для IE 6 и 7 (все-таки по разному стили парсят). Потом надо не забыть, что дизайнеры тоже люди, и некоторые из них мазахисты (или нет? В любом случае – не нам решать!), и сидят под Safari. А еще есть Konqueror и много другой “хери”, бегающей на Гекковских движках, которая может быть единственным инструментом у кого-то под рукой.
2006-07-25 at 1:18 pm
Пример, приведенный в статье не пройдет валидацию, т.е. пользуясь FireFox’ом ошибки не отобразятся, а вот прогоня валидатором, вылезет сообщение об ошибке на и , хотя автору за идею “5+” :).
2006-08-29 at 9:47 am
Совсем недавно потребовалась поддержка IE7, пришлось использовать следующие хитрости:
IE 6 и ниже
* html {}
IE 7 только
*:first-child+html {}
IE 7 и современные браузеры
html>body {}
Только современные браузеры (не IE 7)
html>/**/body {}
2006-09-07 at 8:01 am
Разработчики IE, как всегда, не исправили все до конца. Обратите внимание на атрибуты lang. Селекторы с их использованием 7-ой IE не понимает.
div {
background: #006600;
color: #FFF;
}
:lang(ru) div {
background: #CC0000;
}
Это мой див. Если вы в ie (включая 7), то он зеленый. Если нет, то красный.
2006-10-13 at 11:29 am
P.C.к вышенаписанному: Надо добавить в тэг html xmlns=”http://w3.org/1999/xhtml” lang=”ru” xml:lang=”ru”
(XHTML 1.0 Strict)
2006-10-13 at 11:33 am
Мдя… Я вот одну вещь узнал.
При указании инструкции
и доктайпом не менее xhtml 1.1 то обычный список ul, ol со вложенными li, ведет себя совершенно гуманее, чем без этой инструкции при некоторых обстоятельствах в стилях CSS.Так вот у меня есть некоторое утверждение: БЛОК есть площадь. А построение как известно в основном из него и состоит. ПЛОЩАДЬ не может отображаться в разных браузерах по-разному.
Соответственно, вывод лишь один: Неправильное отображение, есть причина неправильных инструкций. В основной массе это есть недописанные стили. Например, кто то думает что
есть блок. Но это не так, до тех пор, пока об этом явно не укажут: display:block;
Все на самом деле очень просто!
2006-10-29 at 5:46 pm
А подскажите пожайлуста, как мне, например сдвинуть блок вправо !!!только!!! для ie7??
2006-11-19 at 4:19 pm
2006-11-20 at 1:36 am
2 Баранов Андрей, к сожалению, такая конструкция у меня не работает, она приводит к дополнительному сдвигу бока также и в IE6, а это недопустимо.
2006-11-28 at 10:36 am
Александр, может быть это поможет: http://positioniseverything.net/articles/sidepages/cond_1.html
2006-11-28 at 11:41 am
Не пашет у меня прижате footer к низу во всех браузерах…
.foot {
display:block;
height:70px;
background:#fff;
padding:1px;
position: absolute;
width:100%;
bottom: 0;
}
он прижимается к низу окна, но если содержимого больше, чем окно (т.е. его надо прокручивать), в опере footer остается на том же уровне (относительно текста), а в експлорере смещается вместе с содержимым. Как заставить оперу работать так же?
2006-12-21 at 5:48 pm
Как многие заметили действительно проще разбить один css-файл на два, как в принципе большинство и делает.
2007-03-16 at 1:54 pm
Самый лучший вариант, это разные CSS стили для броузеров. Если структура сайта правильная в смысле она вообще есть, то можно и без CSS все найти и увидеть :) А если дело касается дизайна сайта, то необходимо просто написать несколько разных стилей для поддержки того или иного браузера (если конечно мы не ориентируемся на браузеры, которые в принципе не очень “дружат” с CSS). Сам Зельдман, т.е. его агенство happy cog использует кострукции тиап:
–>
–>
2007-05-16 at 11:58 am
Пропала конструкция :)
2007-05-16 at 12:01 pm
Надеюсь сейчас получится :)
2007-05-16 at 12:11 pm
именно вариант Temasik наиболее жизнерадостный.
2007-07-24 at 4:36 pm
Вот к теме подробная статья об условных комментариях: http://tigir.com/comments.htm
2007-09-20 at 11:23 am
Ай супер! Обсуждение статьи получилось поинтереснее самой статьи!
2007-09-27 at 3:37 pm
и это, как выяснилось на практике, не всегда рабочая конструкция. Лучше писать а в ie.css для 6 и ниже * html, а без * html для 7 и типа выше… :).
По поводу прижимания футера у низу смотреть тут – [url=http://accent-don.ru/xhtml/2007/10/18/xhtml_1.html]Min – max – width для IE6 и
2007-10-27 at 12:54 am
Ну вот…. седня впервые в жизни применил эту штуку для разделения CSS :) Теперь у меня sliding doors табы и ссылки центруются везде… фух. Спасибо за безскриптовое решение! :)
2007-10-29 at 2:36 am
>?нтересно было бы посмотреть на статический сайт в 200 страничек ;) ? на, того, кто его сверстал еще больше.
Пожалуйста: Сайт
Кто верстал оригинал — не знаю (в некоторых разделах еще сохранился код), я верстаю нынешний вариант.
2007-11-07 at 7:08 pm