Динамический css

[@vastvision]

это всё реализуется на javascript

[@vastvision]

я это имел ввиду habrahabr.ru/blogs/webdev/28759/

[@bO_oblik]

Вещь конечно клевая, но не из той оперы.

[@maxic]

Вообще «хак» — это зло.

Ну сколько можно делать «разные» сайты.

«Хак» — это БЫСТРОЕ извавление от чего либо.
А посидеть подумать?
Мало того когда вы найдете ответ на проблему — вы СМООБУЧИТЕСЬ!
Сначала потратите время, но у вас будет свое «портфолио» борьбы с браузерами без всяких хаков.

Кстати в 99% случаев можно обойтись без хаков! Существует масса других способов (технологий) чтобы был один css для всех браузеров.
Надо просто правильно верстать и не избегать проблем «по-быстрому», а РЕШАТЬ их.

[@Angerslave]

Хм, зачастую хаки требуются чтобы обойти браузерные ошибки в обработке стандартов — IE6 и IE7 сильно грешат этим. Да, можно сделать всё без хаков, но в части случаев без хаков это больше через жопу, чем с хаками. Я не за хаки, стараюсь писать без них, но иногда не очень получается.

[@CAH4A]

А скорость? А тяжёлые сайты? А чистота и прозрачность кода?
Обычно для создания кросс-браузерного решения внедряются дополнительные дивы…

Лучший вариант конечно делить сцц на уровне .htaccess
Вот это я понимаю красота!
И в коде, и в цсс-ах

[@maxic]

И со скростью у вас будет всё в порядке и чистотой кода ;)

И причем здесь .htaccess к CSS?

Раньше сам грешил с хаками. Теперь спокойно, любой сайт можно сделать без хаков css.

[@CAH4A]

RewriteCond %{HTTP_USER_AGENT} ^Opera.*
RewriteRule ^stylesheet.css$ css/opera.css [L]
причём самого ^stylesheet.css$ может и не существовать в природе.

Но я бы делал не так.
В .htaccess кинул бы вот это: RewriteRule ^stylesheet.css$ css/main.php [L]
а в main.php выводил бы '@include «./css/main.css» screen', в котором находится Єйсид-2 вёрстка,
и если $_SERVER['HTTP_USER_AGENT'] указывает нам нам на один из браузеров, который «понтуется», то заинклудить только для него css.

Всё равно, каждый делает так, как ему удобнее…

[@maxic]

Тот же «хак» но на уровне сервера.
Ну сколько раз можно говорить, не пишите для разных браузеров.
Поверьте существуют много путей, когда можно написать один cssбоы и html для всех браузеров, без хаков.
Просто попробуйте.
Запросто, причем ничего тормозить не будет и всё будет прекрасно работать.
Единственный минус — вы потратите (ОДИН РАЗ, пока разбиретесь) время на «понимание» всех браузеров.
Хак — это БЫСТРЫЙ «ответ» на какое-то не понимание (можете называть глюк) браузера.
И связанный, чаще всего, из-за ошибок и непонимания возможностей браузеров в верстке.
Да, я тоже долго доходил до того как делать без хаков. Сейчас, я могу сделать любую верстку практически без хаков (99% случаев). Если все же прихидиться делать с хаками, меня самого уже тошнит. :)

[@CAH4A]

main.css должен быть максимально унифицированным.
В одном проекте, у нас возникла сложность. Глючила опера, причём ТОЛЬКО версии 9.21. А переверстали почти всё к чертям заново.
Было потраченно довольно много времени.

Мой вывод прост:
Хорошая CMS ДОЛЖНА уметь подсовывать мелочные css-ки для определённых браузеров.

Я не предлагаю строить ветвления сильно узко специализированных браузерных css-ок.
Я предлагаю сохранять здравый смысл при написании сайтов в целом.

Искусство ради искусства приносит прибыль только потомкам… ;)

[@Hello1]

Ну а те кто использует не стандартный user agent увидят кривой сайт.

[@bO_oblik]

Нет, они просто не увидят хаков, они увидят основной ксс.

А зачем, собственно, использовать не стандартный user agent?

[@brutaler]

Думаю над делать основной css для браузера который лучше всех проходит acid тест, а хаки использовать для устаревших браузеров.

[@ipod]

А почему под оперой?
Я под FireFox'ом.

[@homm]

Ого! У вас «-0» за каммент :)

[@brutaler]

Прогнал по acid3 пару своих браузеров, посмотрел здесь — en.wikipedia.org/wiki/Acid3
Нужно на оперу ориентироваться судя по всему…
Сам обычно верстаю под ff3, и не знал что опера лучше тест проходит…
Теперь не знаю что и делать, к ff3 привык)

[@Castro]

Я думаю, что это ещё не причина для беспокойства. Вот выйдет ff 3.1, которая будет проходить acid3 лучше Оперы и что придётся опять кидаться на очередной, выигравший маленькое сражение, браузер?! Думаю, что нет. Верстайте под то, что Вам лично удобно

[@404]

А Konqueror 4 его ещё лучше проходит. А ещё есть браузер Amaya, который всё рендерит в соответствии со стандартами, но потом действительно костылей придётся ставить несчётное количество.

На самом деле, в настоящий момент различия в рендеринге между Оперой и Файрфоксом совершенно незначительные.

[@brutaler]

opera 9.50 — 83/100
konqueror 4.0.4 -73/100

[@Amka]

Я верстаю под сафари, но ведь и IE никто не отменял.

[@stolen]

webkit-gtk его уже месяца два как полностью проходит. Если бы не был фанатом KDE, пользовался бы Epiphany/webkit.

[@brutaler]

Не поленился… поставил Epiphany 2.22.1.1. В итоге acid3 — 53/100.
Откуда вы такую информацию господа берете???

[@stolen]

Я тестил эту либу в обвязке midori. Оно работало замечательно, только иногда 100 баллов набирало со второго раза.
Поскольку либа одна и та же, в разных браузерах результат должен быть одинаков.
«поставил Epiphany 2.22.1.1» — это как? Установил найденные где-то бинарики? У меня в портах последняя версия 2.22.2, что новее. А WebKit какой версии?
Инфу берем отсюда
Мораль: Свежий софт надо собирать руками, чтобы не искать виноватых, кроме себя.

[@brutaler]

Хм, спасибо за ссылку, да я поставил бинарники и походу Epiphany был без поддержки webkit.

[@kost_bebix]

Разве acid-тест как-то относится к цсс? Там же, вроде, JavaScript в основном проверяется.

[@pepelsbey]

ACID3 — это стерильный и абсолютно бесполезный для верстальщика тест. Он нужен только производителям браузеров. Opera может получать 120 баллов из 100, но иметь страшные глюки в рендеринге вёрстки. Более того, многие производители подгоняют некоторые решения именно под ACID-тест! Так что давайте без глупостей.

[@RJD2]

Я незнаю ниодного человека пересевшего на другой браузер из-за асида. Асид вещь абстрактная, не стоит так сильно на нее полагатся.

[@RJD2]

Мне кажется что завлекают юзабилити и всякими вкусностями.

[@RJD2]

А я нет, идеальный браузер еще не придумали =)

[@stolen]

Epiphany? Оно умеет рендерить вебкитом, юзабилити должно быть нормальным, не такой уж молодой браузер (сам не пользовался из-за несовместимости меня с гномом, поэтому предполагаю)

[@RJD2]

я с гномом тоже ни-ни =)

[@pav]

Именно «сайты должны верстаться так, чтобы все видели их одинаково», а Conditional-CSS всего лишь инструмент позволяющий верстальщику достичь этого. Для конечного пользователя не важно чем пользовался разработчик юзал он хаки или же Conditional-CSS ему важен как раз результат.

Согласен что использовать или нет Conditional-CSS этот выбор делается разработчиком. И если он в конечном итоге достиг цели используя динамический css что в этом плохого?

[@pav]

А как же бедные пользователи? Или же на сайтах нужно писать примерно следующее «извините что в вашем ИЕ все так криво мы за стандарты, вы либо с нами либо против нас» :)

[@pav]

Conditional-CSS какимто образом мешает соблюдению стандартов создателями броузеров?

[@markshevchenko]

Никакой веры этому W3C у меня лично нет. До сих пор не решили несколько фундаментальных проблем (это почти за 15 лет). Какая это стандартизация, если для более-менее сложного дизайна нужно вставлять кучу DIV'ов только для того, чтобы CSS правильно работал.

Бирюльки. И решения пока не предвидится.

[@ya_goshka]

есть w3c и есть стандарт
а есть браузеры и реализация стандартов или частичная, или через жопу

слабо верится, что ие в скором времени будет поддерживать все, что есть у конкурентов;
что в каждом браузере будет рендер ТОЛЬКО по стандартам и яваскрипт будет везде работать быстро

[@soulim]

Поддержу electron. Отличия минимальны, и при правильном проектировании верстки проблем с «несовместимостью» минимум.

[@dmx]

Да, их минимум, этих несовместимостей. Но как решать те, которые все же имеются?

Вот недавно столкнулся с HR. В IE он всегда имеет margin 7px. Т.е. если задаем 0, то все равно на 7 пикселей отступ есть. Да, можно заменить на DIV и не ломать мозг, но ведь набегут другие и будут кричать, что это несемантично и прошлый век.

Просто как пример привел. У вас есть идеи как подобные проблемы решать стандартными путями?

[@soulim]

Быть может стоит не всегда их решать, а иногда учитывать, «перенося» их из колонки проблем в колонку возможностей? Я поясню на вашем примере.

Создавая макет учитывать, что (как пример) HR имеет отступ в IE (а пока это лидер по популярности, хоть и сдающий свои позиции), и рисовать с оглядкой на это свойство IE. И соответственно, с другими проблемами несовместимости поступать аналогично (по мере возможности).

Это как мое предложение, сам я тоже пользуюсь им. Согласен, что бывают ситуации, когда нельзя повлиять на макет и т.п., но что таки делать… без этого было бы скучно (шучу).

Вопрос сохранения семантики, я тоже поддержку. На мой взгляд это важный момент.

[@dmx]

Сразу не смог ответить…
Рисовать с оглядкой на свойство. Т.е. эту горизонтальную линию совсем бурать из дизайна? Или сверстать нормально под доминирующий браузер и в остальных будь как будет. Вы просто и то и то упомянули, поэтому я вас не совсем точно понял.

На сегодняшний день я не использовал хаки, просто для IE подгружаю дополнительный файлик CSS, который содержит немного другой стиль для HR. В результате я получаю сайт именно таким как хочется. А если бы я в макете не использовал HR вообще, то сомневаюсь, что это как-то улучшило бы браузер IE, или его разработчики обратили на это внимание. Если поразмыслить, то даже наоборот, если HR не используют, то и не будем париться над его исправлениями. Где-то так :)

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

По теме самого топика. Такой утилитой не пользовался бы. Думается, что при большом файле поддерживать его будет сложнее, чем 2 CSS, в одном из которых только баги пофиксены.

[@mester]

hr{display: block; padding:0; margin:0; height:10px; border: none; color: red; background: red;}
* html hr{margin:-7px 0}

во всех браузерах одинаково выглядит

[@dmx]

Спасибо.
Все равно этот способ основан на багах того или иного браузера = хаки.
Хоть приведенный код и является валидным…

[@mester]

имхо если валидно — значит использовать можно всегда
идеальных решений не бывает, особенно если верстка сложная

ещё 1 валидный хак — для IE7:
*: fisrst-child+html .class{}

тру верстальщику этих 2 хаков должно хватать

[@mester]

немного ошибся

*: fisrst-child+html .class{}

[@mester]

*: first-child+html .class{}

пробел после *: ставит сам Хабр

[@dmx]

Извините, промахнулся по плюсу, поставил в другом месте ;)

[@Castro]

О, Вы не знаете этих пользователей. Они то js отключат, то приём кукисов. Hello1 просто пытается оценить каково может быть поведение предложенного Вами механизма в реальных условиях

[@bO_oblik]

Ну можно css отключить, браузер отключить — вид сайта будет совершенно другим.

Из крайности в крайность.

[@balvardo]

Мда, расценивал это высказывание всю жизнь как шутку, пока мне не объяснили что «Интернет» — это такая синяя буковка… (Нет не блондинка, вообще взрослый солидный мужик...)

[@dec5e]

«Но зачем обычному пользователю с IE получать избыток кода для других браузеров firefox, opera, safari?!
Это проблема легко решается с помощью динамического css.»

«Нет, они просто не увидят хаков, они увидят основной ксс.»

Как-то вы сами себе противоречите.

[@markshevchenko]

Почему?

[@unnamed777]

Conditional-CSS, мне кажется, хорош только когда для осла используется слишком много хаков относительно правильных браузеров(хотя тут можно использовать и условные комментарии самого осла), либо для отделения стиля для компа от стиля для мобильного устройства(последние три в списке). Для остальных же(firefox, opera, konqueror, safari) в преобладающем большинстве случаев можно найти решение, одинаково ведущее себя в этих перечисленных браузерах

[@azproduction]

Особо заковыристых хаков я в своей практике и не встречал, максимум это минмакс для 6 версии.
Проект уже запоздал для десктоповых решений. Ему бы выйти в 190х годах, когда каждая команда девелоперов писала свой браузер под свои стандарты. Единственное место где его можно широко использовать — портативные браузеры в PSP и iPhone.

[@InDel]

в 190х годах писали на березовой коре )))

[@KaLGaN]

Я убежден, что почти любой макет можно сверстать, не используя хаков вообще. А это все костыли для здорового человека.

[@bO_oblik]

Ну если это один абзац текста с заголовком.

Да и то, в Сафари текст с маленькой тенью, которую нужно отключать с помощью text-shadow.

Так что это фантастика.

[@KaLGaN]

Я говорю как раз про серьезные макеты. Тут вопрос подхода к верстке.

[@rimmer333]

Извините, мой опыт показывает строго обратную картину. Элементарные, без изысков, раскладки сносят башню IE — удваиваются маргины, пропадают фоны итд. По крайней мере position: relative или zoom:1 приходится прописывать, а это уже хак пошел (хотя конечно выносим всё во внешний стиль и через СС, делаем хорошую мину при плохой игре). Прибавляйте отсутсвие толкового css-ховера (заворачивать всё в <a> без оговоренной стандартами надобности — хуже css-хака), прибавляйте PNG.

К несчастью, стандартный набор лекарств для IE уже входит в ежедневный рабочий процесс, тут ничего не попишешь. Приходится по крайней мере выносить эту «грязь» в отдельный файл и тешить себя мыслью, что весь остальной код стандартно-совместимый.

[@bassdrum]

двойные маргины (если они изначально четные) — легко фиксятся без хаков, фоны и все остальное также -)

как в последнее время решается проблема с пнг в 6-ке у нас — если заказчик не против (а он, как правило, не против) то для 6-ки в качестве фона вставляется гифка или джпег эмулирующие пнгшку, а для остальных браузеров грузится полноценный пнг. в результате, пользователи ие6 видят вполне адекватную картинку, а заодно и понимают что их браузер устарел («ведь вот на соседнем мониторе тут тенюшки красивые, а у меня зубчатые уголки!»).
всем хорошо и валидность не страдает.

[@rimmer333]

А, пардон. Я врубился. Я иначе понимаю css-хаки. С моей точки зрения это любой браузер-специфичный код или код, результат работы которого не описан в документации стандартов или противоречит им и потому вызывает нестандартные, хоть и желательные реакции со стороны браузеров (иногда становясь браузер-специфичным, то есть еще и подпадая под первое условие). Без таких вещей не обойдешься в наши дни. А моветон типа * html не рассматривается вовсе, как можно-с?!

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

[@Castro]

«Но зачем обычному пользователю с IE получаться избыток кода для других браузеров firefox, opera, safari?!» — где-то что-то пропустили! Может получать?
Вообще рядовому пользователю всё равно, сколько там строчек кода и сколько их них предназначено для не для ИЕ, потому что, зачастую, бОльшая часть избыточного кода пишеться как раз для ИЕ. С другой стороны, умные пользователи, которые знают, что сучествует вёрстка под разные браузеры, они давно используют правильные браузеры. Так что Ваш пример полезен только как академический пример

[@bO_oblik]

Спасибо. Поправил.

[@DmitryBaranovskiy]

Это называется browser sniffing. Написано несчётное количество статей почему это плохо. И всё равно находятся люди которые снова и снова наступают на эти грабли. Причём каждый раз всё более профессионально.

[@bO_oblik]

Будте добры, что еще за грабли такие, вкратце.

Думаю многим будет интересно.

[@DmitryBaranovskiy]

Ну вот например из последних статей на эту тему: dev.opera.com/articles/view/a-browser-sniffing-warning-the-trouble/
и вот еще: andrewdupont.net/2007/04/04/browser-sniffing/
Небольшая цитата оттуда:
* Use object detection whenever possible.
* Test for capabilities (and some simple quirks), storing the result in a boolean somewhere.
* Browser sniff whatever is left over. (But be sheepish about it.)

[@bO_oblik]

Все решается правильной настройкой сервера.

[@crocodile2u]

нет, проблема динамического ЦСС не в этом. Заголовки, отвечающие за кэширование, PHP или любой другой язык можно отдать без проблем.

Мое мнение: проблема такого подхода в его нестандартности (а покажите мне стандарт/спецификацию такой записи, да чтобы разработчики его знали) — это раз; лишние нагрузки на сервер — два; Заголовок User-Agent (а как еще вы собираетесь на сервере определить, каким браузером пользуется клиент) — так вот, заголовок User-Agent не является обязательным, может «зарезаться» прокси-сервером, может вообще содержать любую чушь или недостоверные данные (в опере раньше прям на виду был дропдаун-бокс «Identify As Opera/MSIE/Firefox») — это три. Это так — то, что вот прямо сейчас пришло в голову.

Верстайте без хаков. Аминь.

[@feedbee]

Некоторые люди специально в своих браузерах выставляют user-agent на IE, думая, что при этом им будет проще жить. В этом случае они получат кривизну.

В то же время на JS можно на 100% правильно определить браузер и показать сайт ровно.

Так что, будем в XXI веке считать килобайты лишнего CSS, или страраться сделать показ сайта для посетителя максимально правильным?

[@fiskus]

да вы заебали уже, неучи. потратьте наконец пару дней и выучите нормально два десятка тегов и CSS. Если у верстальщика есть на плечах голова и есть время, то сайт верстается без хаков (в крайнем случае пара правил для экслорера шестерки).

[@404]

вот действительно, обычно к эксплореру приходится прицеплять дополнительный CSS, а не наоборот.

[@bO_oblik]

Вы бы для начала русский выучили. Молодежь.

[@say]

хорошая штука, ох туда бы еще firefox!

[@bassdrum]

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

#container {width:100px; padding:20px;}
html>body #container {width:60px;}

Как правило, этот прием достаточен для всех запросов и «детских» и «недетских» макетов.

[@AlexChudd]

А что тогда, по вашему, хак? Не html>body ли?

[@crwin]

для устранения ксс-багов в ие6/ие7 рекомендую ie7.js — вещь архинужная и архиполезная! месяц эксплуатации и пока что нареканий особых нет, но от кучи кривого ксс исправлет

как показывает практика, то FF2 так же был вовсе не идеальный браузер (да и вообще он откровенная ерунда), и под него пришлось так же искать кое какие хаки (не работающий инлайн-блок, баг с округлением 1 пикселя и т.д.), но они работают и в FF3, приходится выбирать приоритет и перелапачивать все правила, т.к. половина «нормальных» юзеров всё ещё сидит на 2ом — грабли которые сами и построили.

[@Lex85]

по моему опыту, в 90% можно написать такой код, что никакие грабли нужны не будут, хотя как вспомогательное средство може сгодиться

[@KaLGaN]

Вот о том же я и толкую. К хакам нужно прибегать только в случае крайней необходимости. Если не получается сверстать макет без хака, надо 10 раз подумать, перед тем как использовать хаки. Я бы даже сказал, что в 95% случаев есть решение, которое позволяет обойтись полностью валидным кодом.

[@pepelsbey]

Хорошо сказано. Вот заточить бы это решение только под то, чтобы подключать косметический мини-файлик для каждого браузера с перфекционистскими штучками, вроде box-shadow для Safari и пачки хаков для IE6…

[@Delka]

а почему просто неиспользовать проприентарное свойство (-o-,-moz- и т.д.) каждого браузера через запятую с нужным css-свойством? Браузер обязан игнорировать стиль, если в селекторе встречается что-то незнакомое — получаем уникальные стили для каждого браузера.

Евгений Степанищев (bolk) раскрывал тему.

Но в любом случае — это последний шаг, это должен быть как последний патрон у офицера, если где-то очень надо допикселя выровнять.

Да непребудет с вами хаков кроме IE CC ^)

[@XVII]

Может кто-нибудь подскажет где нуб вроде меня может прочитать основательную статью про все эти кросбраузерные заморочки???

[@fiskus]

в интернете

[@XVII]

что я могу сказать? я как раз там и смотрю…

[@dohlik]

Тут к примеру есть список багов.

[@XVII]

Спасибо!

[@strix]

или здесь: positioniseverything.net

[@ingeniarius]

Есть ещё такая технология как SASS
Её ещё бы дополнить кроссподдержкой автоматической
вообще будет отлична.

[@viperet]

Use the online compiler to generate the required PHP file and save it to your web-server. Then import the PHP file as you would a normal CSS file: // Conditional-CSS Import @import «/media/css/c-css.php»; (цитата с оффсайта)

Получается — при каждом просмотре странцы с этим супер-пупер Conditional CSS дергается апач и php? Да уж решение — у любого кто разрабатывал более менее посещаемые сайты волосы дыбом становятся!

[@LimeOrange]

В принципе, да, решение не айс. Было бы разумнее парсить базовый RCSS с правилами, генерировать набор разных CSS для разных браузеров, и уже в шаблоне одной строчкой (например, css_hacks_tag @page) подключать «нужный» CSS.
Ну и вообще, кеширование спасет мир. nginx + memcached = love.

[@viperet]

А при таком решении получается в ключ кеша надо включать useragent… :-(

[@AgaFonOff]

Но зачем обычному пользователю с IE получать избыток кода для других браузеров

Плата за пот и кровь верстальщика?

[@dshster]

Лично мне хватает условных комментариев для подключения таблицы под IE6 в которой прописанны корректирующие стили. Под остальные же браузеры все хорошо верстается без применения хаков.

[@zw0rk]

Толку было бы больше, если бы из валидного CSS эта тулза делала ie6/7-CSS. Хоть какой-то прок был бы.

[@viperet]

а действительно, может есть какие тулзы для автоматической генерации CSS-ок для IE — ведь такие вещи как opacity, max-width, position: fixed и другие — можно эмулировать почти автоматически!

[@Mordraug]

То, что пользователи хотят чтобы выглядело на 100% одинаково во всех браузерах — это миф. Этого хотят только разработчики, зачем — хз. Пользователю на сайте нужно то, за чем он пришел, а пришел он явно не за тем, чтобы сравнивать попадает ли попиксельно страничка в Опере в страничку в ФФ или нет. Дизайниться и верстаться должно так, чтобы нормально работало и было удобным, а выглядит ли оно так же в IE как в Сафари или ФФ, сколько там хаков использовано и вообще проходит ли оно валидацию — пользователю до лампочки.

[@Mordraug]

Добавлю про ацид тест еще — это мерянье письками для разработчиков браузеров, и возможно для фанатиков. Обычному пользователю насрать на то, сколько его браузер набирает очков в каком-то там тесте. Браузер выбирается из-за своей удобности. Так же, как клавиатура, мышь или даже одежда.

[@strix]

)) вы ведь тоже пользователь определённых сайтов. Если сайт посвящён веб-разработкам, а вы — веб-разработчик, то скорее всего ВАС это будет интересовать. А если кто-то заходит только почту проверить, то тогда действительно — всё равно.
ИМХО — всё зависит от целевой аудитории сайта, имиджа компании, тематики и т.д.

[@ilimer]

Ээ,
миллион случаев, а когда без хаков или подсовывания разных css ничего не сверстать.
Может я что-то не знаю, но разве уже придуманы валидные способы:

• заставить работать position: fixed; в 6 MSIE
• Оперу заставить вопринять дробные значения в css?
• привнести прозрачность в 6 MSIE?
• заставить работать min-height в 6 MSIE ?

А прото, как можно себе жизнь упростить, например эмулируя: over и: after в MSIE.