CSS для непослушных броузеров

17 Jan, 2006

Конечно все знают кучу всевозможных хаков для ИЕ, и * html и _height:0. Но порой этих хаков становится слишком много и разумнее их все впихнуть в отдельный CSS файл. О том как я это делаю я и написал.

Структура CSS файлов

Если кто помнит(пост на эту тему), то я линкую из страниц на один CSS файл master.css. Примерно такого вида:

@import url("base.css");
@import url("layout.css");
@import url("fonts.css");

Таким образом, если бы я мог добавить conditional comments типа

...
@import url("fonts.css");
{только для ИЕ5}
@import url("fonts.css");
{/только для ИЕ5}

То я бы был несказанно рад. Сразу оговорюсь что весь этот сыр бор из-за того что мне не очень нравится замусоривать HEAD красивых HTML файлов всякими вот такими штучками:(conditional comments)

<!--[if IE]>
<style>
...
</style>
<![endif]-->

Мне это кажется неэстетичным :). Поэтому я люблю перенести весь этот бред с определением броузеров в малюсенький CSS файл и забыть навсегда. (я о нем по любому забуду, но в HTML он все же будет иногда напоминать о себе)

Волшебство

То есть дело лишь за тем, что бы реализовать вот это {только для ИЕ5} внутри CSS.

Ну а дальше дело техники. Всем известный Тантек Селик который знает о броузерах не понаслышке :) подарил нам целый арсенал для таких фокусов.

Вот так выглядит теперь мой CSS файл master.css:

@import url("base.css");
@import url("layout.css");
@import url("fonts.css");
/* IE5/Win Only Styles(только для 5го Интеренет Эксплорера под винду)
Uses the Mid Pass Filter:
http://tantek.com/CSS/Examples/midpass.html
----------------------------------------------- */
@media tty {
i{content:"";/*" "*/}} @import url('ie5win.css'); /*";}
}/* */

Вот собственно и все. Последний CSS файл увидит только лишь 5ый Эксплорер под виндой. Для меня такое отсеивание самое актуальное. Разумеется существует магия на любой вкус.

Вот так можно "кормить" только ИЕ5 под Мак:

/* IE5/Mac Only Styles
Uses the IE5/Mac Band Pass Filter:
http://stopdesign.com/examples/ie5mac-bpf/
----------------------------------------------- */
/*\*//*/
@import url("ie5mac.css");
/**/

Конкретно эти оба кусочка кода я позаимсвовал из CSS файла сайта Дага Баумана

Конец

Для тех кто использует conditional comments это конечно может и не пригодится. Но для меня это изящный способ от них уйти. Добавил себе в темплейт и горя не знаю :)

Ссылки

Оба хака в действии
CSS для среднего звена броузеров ИЕ5-5.5 - Mid Pass Filter
CSS только для самых новых броузеров - High Pass FIlter
Inline High Pass Filter - первую половину одного CSS файла будут читать старые броузеры, а вторую только современные.
IE5/Mac Band Pass Filter - как отдать CSS только для ИЕ5 под Мак

Был бы рад услышать ваши мнения и идеи по этому вопросу.

28 комментариев к “CSS для непослушных броузеров”

1.пятка | 17 Jan, 2006: все бы ничего, только цсс-ки, подключенные импортом, не кешируюцца. иешкой, во всяком случае, точно. конечно, для широкого канала и т.д. на это можно забить, но все-таки..)
2.akella | 17 Jan, 2006: Вот странно. А как узнал? проводил тесты? Или поделись линком - я раньше об этой особенности не слышал... :(
3.ganges | 18 Jan, 2006: Короче, чес это про "не кешируется CSS подключенный @import'ом" галимый, в смысле полный. Только что сам проверил. Методика проверки (IE 6 Win SP2) 1. Удалил все "временные файлы интернета" 2. Проверил глазами - все чисто 3. Зашел этим ослом на свой сайт, где все - один сплошной @import 4. Открыл "временные файлы интернета" 5. Наблюдаю глазами :) все импорты в кэше. 6. При выделении одного из файлов в свойствах так и пишет "имя в кэше" и имя файла с индексом. Юра, тебе скриншот ушел. 2Пятка Смени траву, Dude.
4.Gansik | 17 Jan, 2006: Многоуважаемый Akella не любит conditional comments, но тем не менее ими довольно изящно можно подсунуть разные CSS для разных версий IE. Вот что у меня получилось: <style type="text/css">@import url("css/all.css") All;</style>  В примере Opera 6.0 тоже отсекается. Это все делал, медитируя над http://imfo.ru/csstest/css_hacks/import.php
5.ganges | 17 Jan, 2006: 2Пятка Надо бы аргументировать это хоть как-то для начала :) Или развить тему. Мне это очень интересно, потому что, как и Акелла. я из прилинкованного файла screen.css импортирую составляющие дизайна ala layout.css, visuals.css, textformatting.css А ты говоришь "не кешируется" :) Страшно!
6.akella | 17 Jan, 2006: 2Gansik: Конечно можно но все равно не люблю - какая то внутренняя антипатия - то есть скорее всего что то моим мозгам не нравится в таком решении. Ну не должно это быть частью HTML кода по моему. Наверно это и мешает. И я против использования простых хаков. Я бы хотел что бы это всегда было вот таким бредом из кучи символов как в посте. Они его сделали таким не потому что короче не придумали. А для того что бы оно еще и всегда выделялось из общей массы кода. Вряд ли при создании они об этом думали но сейчас точно думают. Хотя те кто не имеет ничего против CC - на вкус и цвет... 2Пятка: Быть может ты имел ввиду проблему с кешированием при таких линках: @import "/css/ie.css"; Потому что такая проблема действительно существует. Но она исчезает при иcпользовании: @import url(/css/ie.css);
7./lekcyc lllumukcyc | 17 Jan, 2006: Там есть ещё и другая гадость. Кажется, если ты пытаешся сохранить всю страницу целеком, то оно тебе не сохраняет импортированные CSSы. Это единственный минус, который можно себе придумать от их использования ;)
8.пятка | 18 Jan, 2006: да. в IE 5.0 да. еще сервиспак может играть роль. короче - условий много - прислать отчет о багах из архива?:) btw, это должно быть в msdn 7 ganges: будем спорить по поводу травы?
9.ganges | 18 Jan, 2006: Со мной по поводу травы спорить глупо :) Там, откуда я родом, один штакет напрочь убивает шестерых часов на 5.
10.akella | 18 Jan, 2006: Ну... если только в ИЕ 5.0, то уже можно про это забыть - даже на самых "старых" (по аудитории) порталах его доля не превышает 10%. А если еще учесть какие то там другие ограничения на сервис паки - то можно забыть про это. Это как раз тот момент когда мне хочется сказать что это проблемы пользователя. Обычно я этого не говорю. Но за линк на описалово в мсдн был бы оч благодарен.
11.пятка | 19 Jan, 2006: 2 akella: безусловно, проблемы пользователя, так же, как и то, диалап у него или выделенная линия, кривые руки или нет etc. в любом случае пример имеет место быть, и отмахнуцца от него низя) линк поищу. последний мсдн еще не смотрел, но, думаю, никто этого фиксать не стал. 2 ganges: к примеру, если ты из африки - это не значит, что у тебя черная кожа. это я к тому, что и про траву могу рассказать тебе намного больше)) а что касаецца проводимых тобою тестов, скринов и т.д. - то у меня, на твоем месте, возникло бы много вопросов, прежде чем я взялся бы опровергать утверждение, например - для начала, версия браузера. потом ос и наличие или отсутствие сервиспака, потом среда, на которой развернут сайт (портал, сервис). затем механизм воспроизведения ошибки. а для начала, как минимум гугли. кстати - тот способ проверки, который ты привел - не канает, ибо не дает возможности сверки хидеров.
12.ganges | 19 Jan, 2006: Пятка не умничай, плиз, не учи отца и баста. Осел - страшное говно, особенно пятый, об этом знает весь девелоперский мир. Проблемы с кешем существенной НЕТ, иначе был бы хайп, который я бы точно не пропустил и Акелла тоже. И не гони про среду и сервис пак, единственное что может влиять на разное поведение кэша у осла (в нашей епархии) это билд. У меня все кешируется везде и в пятом тоже.
13.ganges | 19 Jan, 2006: "кстати - тот способ проверки, который ты привел - не канает, ибо не дает возможности сверки хидеров." Кстати, что это значит? Должен ли я не верить глазам своим и не считать кэш кэшем, потому что у меня нет информации о HTTP? С чем сверять? Зачем сверять, если кэш был пустой, а стал полным моими импортируемыми файлами?
14.пятка | 19 Jan, 2006: 2ganges слушай, отец. то что ты говоришь - полная чушь, поскольку свидетельствует только о том, что все что ты делаешь/делал, никогда не имело серьезной промышленной или бизнес основы. в таких случаях у нас говорят - ламо). в связи с этим дальнейший спор с тобой считаю бесполезным. а что касаецца хидеров - есть такая тулза - proxomitron. приценись, посмотри, может узнаешь что-то полезное. существенной проблемы нет, никто и не говорил, что все это смертельно, было указано лишь на существующий факт.
15.akella | 19 Jan, 2006: не могу понять о чем вы спорите? о траве? :) По моему все ясно - если где то оно и не кешируется то только в 5м ИЕ. А это как я уже сказал более чем малозначимо сейчас(я упоминал статистику). И, Пятка, не вижу никаких причин для иронии по поводу кривых рук и широты канала. Это как раз тот случай когда МОЖНО отмахнутся. 10% юзеров у которых не кешируется пара тройка файлов?(причем 10% как максимум) Какая тут серьезность... НО, у каждого свои критерии. Еще раз повторяю не вижу никаких поводов для препирательств. Но линк на точное описание проблемы все бы расставил по местам... Чем попусту спорить лучше бы фактами оперировать. ЗЫ Будьте корректны.
16.ganges | 19 Jan, 2006: 2Пятка "было указано лишь на существующий факт." 1. Да где ж "факт"? Ты не привел ни одной ссылки, предлагал только погуглить 2. Этот сайт читают люди, которые изучают или по крайней мере интересуются CSS. Я думаю, что не надо объяснять, как вредно бывает на начальной стадии изучения чего либо получить дурацкий совет с апломбом типа от "профессионала". Именно поэтому так много табличного дизайна, кстати. Это к вопросу об ответственности в комментариях. 3. Кэширование CSS - одно из важнейших преимуществ этой технологии. Это к вопросу почему я вообще стал комментировать этот чес. Бывает всякое, но потрудись, пожалуйста, привести факты или хотя бы аргументы. (ссылки) Мой тест - это аргументированный факт. Если ты считаешь, что я не прав, или мой тест по каким-то причинам несостоятелен - проведи свой или докажи несостоятельность аргументированно, а не ссылаяcь на названия программ (кстати, ты должен знать. что где прокси - там и проблемы с кешированием, может это все из-за того, что ты настроить правильно не смог приблуду?) Ну и наконец к вопросу о "ламо". Ты кто по профессии? Или кем себя считаешь? Я позволю тебе, как профи, дать свой ламерский совет - познакомь свой сайт с валидаторами. working class hero is something to be...
17.пятка | 19 Jan, 2006: "линк поищу. последний мсдн еще не смотрел, но, думаю, никто этого фиксать не стал." ты читать умеешь? отец))) (вот я, кстати, уже давно отец) кроме того, фривольный тон "профессионала" впервые употребил ты, думаю, спорить с этим нет нужды, достаточно посмотреть твои комменты (пост № 7). в таких случаях я отвечаю довольно резко, если скажешь еще что-то подобное - узнаешь как именно:), просто не хотелось бы портить подобными вещами то, ради чего тут все собрались. тулза, которую я тебе предлагал использовать - не прокси сервер и на его работу никак не влияет, но уж если ты об этом заговорил, то должен знать, что, по крайней мере, 70% пользователей ходят в мир именно через проксю. но этот так, просто к слову. моя работа, это моя работа. мой сайт - что ж, тут ты прав. если я не ошибаюсь, проблема с валидацией там только в урлах, ну сори - не сподобился я имплементнуть реврайтинг. btw, написан он был достаточно давно, и сейчас багаж знаний намного больше. это, врочем, особого значения не имеет.
18.пятка | 19 Jan, 2006: 2 akella: кроме того, еще есть один аспект - если уж в приведенных в примере хаках ие 5.0 учитываецца - то почему бы просто не подумать о проблеме кеширования просто как о возможном варианте. или - если доля юзеров невелика - зачем эти хаки вообще?:) насколько я понимаю, все претензии исчезнут, если я покажу линк какого-нить "гуру" или пример из доки? ок. тогда ждите:)
19.ganges | 19 Jan, 2006: Хорошо, я принимаю это и да, наверное, сам виноват, пардон, проехали хамство. по делу "70% пользователей ходят в мир именно через проксю. но этот так, просто к слову" Вот я об этом и говорю - вот это в твоих постах цепляет - это просто базар. Откуда ты взял эту статистику по прокси? Я думаю, что так же прочитал где-то или просто "ляпнул". Линк приведи на какой-нибудь крэдибл ресурс. "насколько я понимаю, все претензии исчезнут, если я покажу линк какого-нить “гуру” или пример из доки? ок. тогда ждите:)" Претензий к тебе насколько я понимаю не было никаких CSS гуру можно по пальцам пересчитать, насколько мне известно (просто оченно серьезно я этим интересуюсь, а не потому что "отец") никто из них об этом не писал. Ссылку уже вторые сутки ждем :) Понимаешь? Это важно, как минимум для меня. Это мое хобби и мой хлеб одновременно. И если у меня такой "прогреб" в этом деле, что я не знаю, что @import не кешируется в ИЕ (твой первоначальный и неточный как ты сам сказал коммент) - то для меня очень важно исправить дырку в знаниях. Пока нет ссылки - это Мнение, которое вступает в конфронтацию с моим Знанием и без конкретных доказательств для меня просто чес. К тому же на правиле @import построены куча хаков как раз для ИЕ5 Все, что прошу - приведи ссылку
20.пятка | 20 Jan, 2006: угу. вобщем нашел только про картинки и н только ие5.0. чуть из другой оперы.
21.mcmx | 22 Jan, 2006: А я вот эту проблемку чуть подругому решил для себя :) в CSS я вообще никаких тааких фортелей не использую... По той же причине, что и наш уважаемый автор не использует их в HTML - некрасиво и не изящно IMHO :) А делаю я это в .htaccess, потому как сервер так или иначе знает, что за зверь к нему стучится :)
22.ganges | 22 Jan, 2006: 2mcmx Этот метод, как и другие, имеет право на существование. Но вот неужели он более изящен? :) Отредактировав CSS или XHTML тебе еще и .htaccess придется править, ИМХО, что удовольствием никак нельзя назвать. Я считаю, что самым "правильным" способом бодаться с ослом является, все-таки, выделение хака в отдельный файл, как это делает Akella. Вот только врядли ему удастся "забыть об этом файле навсегда". Потому что выйдет IE7 в массы и у нас начнется настоящий секс. Теоретики начнуть рассуждать, а практикам придется учитывать все версии от 5 до 7. Одних багов поубавится, зато обязательно появятся новые. Но я отвлекся. Итак - в отдельный файл - это правильно , особенно если хака много (а это не очень хорошо для спокойной жизни). А если хака не очень много - то в CC. И еще, если вы планируете переключение стилей и в разных CSS разный layout (а не скажем цвет только или типографика), то правильнее будет отдельный файл Но в отдельном файле вы не сможете написать Javascript expression (например для эмуляции min- или max-width в IE) - валидатор обругает, а в CC, ИМХО, нет (не проверял)
23.tobto_ | 30 Jan, 2006: ну конешо это гуд. но в отдельном проекте - ступор. я щас делаю штуку для радива, типа фэм. сжался плотна. они говорят - давай красоту (флеши, пурга в гифах,...), а я - вот вам ... ф..ак. они конеша дауны, не хавают перфект оф сиss.
24.kost | 22 Mar, 2006: Спасибо за разъяснение по-русски Mid Pass Filter. Но, похоже, он не действует элементы, спозиционированные абсолютно, которые IE5 желает поставить не туда, куда надо (а может, просто уже мне пора спать).
25.akella | 22 Mar, 2006: Хм, я как раз недавно использовал - вроде работало... Если б показал пример может все бы прояснилось?
26.kost | 22 Mar, 2006: По почте пример отправил.
27.Del'ka | 17 Aug, 2007: Интерестная статья, но я сторонник CC. А вот в @import url недавно разочаровался обнаружив что при сохранении в ИЕ таких страниц, путь к css не меняется и открыв сохранённую страницу юзер увидит голый макет что очень плохо на мой взгляд.
28.akella | 17 Aug, 2007: Да, но главное контент остается доступен пользователю, я это так для себя оправдыва. Наверное броузеры должны скоро научиться сохранять импорты...

Next: Простой тултип или всплывающая подсказка
Previous: cssing 2005