Pull to refresh

Comments 129

я это имел ввиду habrahabr.ru/blogs/webdev/28759/
Вещь конечно клевая, но не из той оперы.
Вообще «хак» — это зло.

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

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

Кстати в 99% случаев можно обойтись без хаков! Существует масса других способов (технологий) чтобы был один css для всех браузеров.
Надо просто правильно верстать и не избегать проблем «по-быстрому», а РЕШАТЬ их.
Хм, зачастую хаки требуются чтобы обойти браузерные ошибки в обработке стандартов — IE6 и IE7 сильно грешат этим. Да, можно сделать всё без хаков, но в части случаев без хаков это больше через жопу, чем с хаками. Я не за хаки, стараюсь писать без них, но иногда не очень получается.
А скорость? А тяжёлые сайты? А чистота и прозрачность кода?
Обычно для создания кросс-браузерного решения внедряются дополнительные дивы…

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

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

Раньше сам грешил с хаками. Теперь спокойно, любой сайт можно сделать без хаков css.
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.

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

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

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

Искусство ради искусства приносит прибыль только потомкам… ;)
Ну а те кто использует не стандартный user agent увидят кривой сайт.
Нет, они просто не увидят хаков, они увидят основной ксс.

А зачем, собственно, использовать не стандартный user agent?
UFO just landed and posted this here
Думаю над делать основной css для браузера который лучше всех проходит acid тест, а хаки использовать для устаревших браузеров.
UFO just landed and posted this here
А почему под оперой?
Я под FireFox'ом.
UFO just landed and posted this here
Ого! У вас «-0» за каммент :)
UFO just landed and posted this here
Прогнал по acid3 пару своих браузеров, посмотрел здесь — en.wikipedia.org/wiki/Acid3
Нужно на оперу ориентироваться судя по всему…
Сам обычно верстаю под ff3, и не знал что опера лучше тест проходит…
Теперь не знаю что и делать, к ff3 привык)
Я думаю, что это ещё не причина для беспокойства. Вот выйдет ff 3.1, которая будет проходить acid3 лучше Оперы и что придётся опять кидаться на очередной, выигравший маленькое сражение, браузер?! Думаю, что нет. Верстайте под то, что Вам лично удобно
UFO just landed and posted this here
А Konqueror 4 его ещё лучше проходит. А ещё есть браузер Amaya, который всё рендерит в соответствии со стандартами, но потом действительно костылей придётся ставить несчётное количество.

На самом деле, в настоящий момент различия в рендеринге между Оперой и Файрфоксом совершенно незначительные.
opera 9.50 — 83/100
konqueror 4.0.4 -73/100
Я верстаю под сафари, но ведь и IE никто не отменял.
webkit-gtk его уже месяца два как полностью проходит. Если бы не был фанатом KDE, пользовался бы Epiphany/webkit.
Не поленился… поставил Epiphany 2.22.1.1. В итоге acid3 — 53/100.
Откуда вы такую информацию господа берете???
Я тестил эту либу в обвязке midori. Оно работало замечательно, только иногда 100 баллов набирало со второго раза.
Поскольку либа одна и та же, в разных браузерах результат должен быть одинаков.
«поставил Epiphany 2.22.1.1» — это как? Установил найденные где-то бинарики? У меня в портах последняя версия 2.22.2, что новее. А WebKit какой версии?
Инфу берем отсюда
Мораль: Свежий софт надо собирать руками, чтобы не искать виноватых, кроме себя.
Хм, спасибо за ссылку, да я поставил бинарники и походу Epiphany был без поддержки webkit.
Разве acid-тест как-то относится к цсс? Там же, вроде, JavaScript в основном проверяется.
UFO just landed and posted this here
ACID3 — это стерильный и абсолютно бесполезный для верстальщика тест. Он нужен только производителям браузеров. Opera может получать 120 баллов из 100, но иметь страшные глюки в рендеринге вёрстки. Более того, многие производители подгоняют некоторые решения именно под ACID-тест! Так что давайте без глупостей.
UFO just landed and posted this here
Я незнаю ниодного человека пересевшего на другой браузер из-за асида. Асид вещь абстрактная, не стоит так сильно на нее полагатся.
UFO just landed and posted this here
Мне кажется что завлекают юзабилити и всякими вкусностями.
UFO just landed and posted this here
А я нет, идеальный браузер еще не придумали =)
UFO just landed and posted this here
Epiphany? Оно умеет рендерить вебкитом, юзабилити должно быть нормальным, не такой уж молодой браузер (сам не пользовался из-за несовместимости меня с гномом, поэтому предполагаю)
я с гномом тоже ни-ни =)
Именно «сайты должны верстаться так, чтобы все видели их одинаково», а Conditional-CSS всего лишь инструмент позволяющий верстальщику достичь этого. Для конечного пользователя не важно чем пользовался разработчик юзал он хаки или же Conditional-CSS ему важен как раз результат.

Согласен что использовать или нет Conditional-CSS этот выбор делается разработчиком. И если он в конечном итоге достиг цели используя динамический css что в этом плохого?
UFO just landed and posted this here
А как же бедные пользователи? Или же на сайтах нужно писать примерно следующее «извините что в вашем ИЕ все так криво мы за стандарты, вы либо с нами либо против нас» :)
UFO just landed and posted this here
Conditional-CSS какимто образом мешает соблюдению стандартов создателями броузеров?
UFO just landed and posted this here
Никакой веры этому W3C у меня лично нет. До сих пор не решили несколько фундаментальных проблем (это почти за 15 лет). Какая это стандартизация, если для более-менее сложного дизайна нужно вставлять кучу DIV'ов только для того, чтобы CSS правильно работал.

Бирюльки. И решения пока не предвидится.
UFO just landed and posted this here
есть w3c и есть стандарт
а есть браузеры и реализация стандартов или частичная, или через жопу

слабо верится, что ие в скором времени будет поддерживать все, что есть у конкурентов;
что в каждом браузере будет рендер ТОЛЬКО по стандартам и яваскрипт будет везде работать быстро
UFO just landed and posted this here
Поддержу electron. Отличия минимальны, и при правильном проектировании верстки проблем с «несовместимостью» минимум.
Да, их минимум, этих несовместимостей. Но как решать те, которые все же имеются?

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

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

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

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

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

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

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

По теме самого топика. Такой утилитой не пользовался бы. Думается, что при большом файле поддерживать его будет сложнее, чем 2 CSS, в одном из которых только баги пофиксены.
hr{display: block; padding:0; margin:0; height:10px; border: none; color: red; background: red;}
* html hr{margin:-7px 0}

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

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

тру верстальщику этих 2 хаков должно хватать
немного ошибся

*: fisrst-child+html .class{}
*: first-child+html .class{}

пробел после *: ставит сам Хабр
Извините, промахнулся по плюсу, поставил в другом месте ;)
UFO just landed and posted this here
О, Вы не знаете этих пользователей. Они то js отключат, то приём кукисов. Hello1 просто пытается оценить каково может быть поведение предложенного Вами механизма в реальных условиях
Ну можно css отключить, браузер отключить — вид сайта будет совершенно другим.

Из крайности в крайность.
UFO just landed and posted this here
Мда, расценивал это высказывание всю жизнь как шутку, пока мне не объяснили что «Интернет» — это такая синяя буковка… (Нет не блондинка, вообще взрослый солидный мужик...)
UFO just landed and posted this here
«Но зачем обычному пользователю с IE получать избыток кода для других браузеров firefox, opera, safari?!
Это проблема легко решается с помощью динамического css.»

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

Как-то вы сами себе противоречите.
Conditional-CSS, мне кажется, хорош только когда для осла используется слишком много хаков относительно правильных браузеров(хотя тут можно использовать и условные комментарии самого осла), либо для отделения стиля для компа от стиля для мобильного устройства(последние три в списке). Для остальных же(firefox, opera, konqueror, safari) в преобладающем большинстве случаев можно найти решение, одинаково ведущее себя в этих перечисленных браузерах
Особо заковыристых хаков я в своей практике и не встречал, максимум это минмакс для 6 версии.
Проект уже запоздал для десктоповых решений. Ему бы выйти в 190х годах, когда каждая команда девелоперов писала свой браузер под свои стандарты. Единственное место где его можно широко использовать — портативные браузеры в PSP и iPhone.
в 190х годах писали на березовой коре )))
Я убежден, что почти любой макет можно сверстать, не используя хаков вообще. А это все костыли для здорового человека.
Ну если это один абзац текста с заголовком.

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

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

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

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

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

Думаю многим будет интересно.
Ну вот например из последних статей на эту тему: 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.)
UFO just landed and posted this here
Все решается правильной настройкой сервера.
нет, проблема динамического ЦСС не в этом. Заголовки, отвечающие за кэширование, PHP или любой другой язык можно отдать без проблем.

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

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

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

Так что, будем в XXI веке считать килобайты лишнего CSS, или страраться сделать показ сайта для посетителя максимально правильным?
да вы заебали уже, неучи. потратьте наконец пару дней и выучите нормально два десятка тегов и CSS. Если у верстальщика есть на плечах голова и есть время, то сайт верстается без хаков (в крайнем случае пара правил для экслорера шестерки).
вот действительно, обычно к эксплореру приходится прицеплять дополнительный CSS, а не наоборот.
Полностью согласен. Сначало пишут статью, где код с хаками, потом по ним учится молодеж и пишит статьи…
Вы бы для начала русский выучили. Молодежь.
UFO just landed and posted this here
хорошая штука, ох туда бы еще firefox!
Такие сложности. При разумном подходе, только шестерка нуждается в отдельных обьявлениях, что легко сделать не используя хаки:

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

Как правило, этот прием достаточен для всех запросов и «детских» и «недетских» макетов.
А что тогда, по вашему, хак? Не html>body ли?
для устранения ксс-багов в ие6/ие7 рекомендую ie7.js — вещь архинужная и архиполезная! месяц эксплуатации и пока что нареканий особых нет, но от кучи кривого ксс исправлет

как показывает практика, то FF2 так же был вовсе не идеальный браузер (да и вообще он откровенная ерунда), и под него пришлось так же искать кое какие хаки (не работающий инлайн-блок, баг с округлением 1 пикселя и т.д.), но они работают и в FF3, приходится выбирать приоритет и перелапачивать все правила, т.к. половина «нормальных» юзеров всё ещё сидит на 2ом — грабли которые сами и построили.
по моему опыту, в 90% можно написать такой код, что никакие грабли нужны не будут, хотя как вспомогательное средство може сгодиться
Вот о том же я и толкую. К хакам нужно прибегать только в случае крайней необходимости. Если не получается сверстать макет без хака, надо 10 раз подумать, перед тем как использовать хаки. Я бы даже сказал, что в 95% случаев есть решение, которое позволяет обойтись полностью валидным кодом.
Хорошо сказано. Вот заточить бы это решение только под то, чтобы подключать косметический мини-файлик для каждого браузера с перфекционистскими штучками, вроде box-shadow для Safari и пачки хаков для IE6…
UFO just landed and posted this here
а почему просто неиспользовать проприентарное свойство (-o-,-moz- и т.д.) каждого браузера через запятую с нужным css-свойством? Браузер обязан игнорировать стиль, если в селекторе встречается что-то незнакомое — получаем уникальные стили для каждого браузера.

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

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

Да непребудет с вами хаков кроме IE CC ^)
Может кто-нибудь подскажет где нуб вроде меня может прочитать основательную статью про все эти кросбраузерные заморочки???
что я могу сказать? я как раз там и смотрю…
Есть ещё такая технология как SASS
Её ещё бы дополнить кроссподдержкой автоматической
вообще будет отлична.
Да кода вы уже научитесь нормально верстать?!
Darkoboar> Блин, в команде одни студенты. Сплошные хаки, заплатка на заплатке. "Не работает? Фигня, ща здесь подкрутим и проверим. Если и так не заработает, скопипастим в другой класс, там будет на подстраховке." Прога напоминает эволюцию организма в радиактивной среде. Три руки, две задницы, восемь членов, причем один на макушке, а единственное яйцо - вместо носа. Но оно как-то живет, передвигается и даже дает потомство.

:( :(
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
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? Да уж решение — у любого кто разрабатывал более менее посещаемые сайты волосы дыбом становятся!
В принципе, да, решение не айс. Было бы разумнее парсить базовый RCSS с правилами, генерировать набор разных CSS для разных браузеров, и уже в шаблоне одной строчкой (например, css_hacks_tag @page) подключать «нужный» CSS.
Ну и вообще, кеширование спасет мир. nginx + memcached = love.
А при таком решении получается в ключ кеша надо включать useragent… :-(
Но зачем обычному пользователю с IE получать избыток кода для других браузеров

Плата за пот и кровь верстальщика?
UFO just landed and posted this here
Лично мне хватает условных комментариев для подключения таблицы под IE6 в которой прописанны корректирующие стили. Под остальные же браузеры все хорошо верстается без применения хаков.
Толку было бы больше, если бы из валидного CSS эта тулза делала ie6/7-CSS. Хоть какой-то прок был бы.
а действительно, может есть какие тулзы для автоматической генерации CSS-ок для IE — ведь такие вещи как opacity, max-width, position: fixed и другие — можно эмулировать почти автоматически!
UFO just landed and posted this here
То, что пользователи хотят чтобы выглядело на 100% одинаково во всех браузерах — это миф. Этого хотят только разработчики, зачем — хз. Пользователю на сайте нужно то, за чем он пришел, а пришел он явно не за тем, чтобы сравнивать попадает ли попиксельно страничка в Опере в страничку в ФФ или нет. Дизайниться и верстаться должно так, чтобы нормально работало и было удобным, а выглядит ли оно так же в IE как в Сафари или ФФ, сколько там хаков использовано и вообще проходит ли оно валидацию — пользователю до лампочки.
Добавлю про ацид тест еще — это мерянье письками для разработчиков браузеров, и возможно для фанатиков. Обычному пользователю насрать на то, сколько его браузер набирает очков в каком-то там тесте. Браузер выбирается из-за своей удобности. Так же, как клавиатура, мышь или даже одежда.
)) вы ведь тоже пользователь определённых сайтов. Если сайт посвящён веб-разработкам, а вы — веб-разработчик, то скорее всего ВАС это будет интересовать. А если кто-то заходит только почту проверить, то тогда действительно — всё равно.
ИМХО — всё зависит от целевой аудитории сайта, имиджа компании, тематики и т.д.
Ээ,
миллион случаев, а когда без хаков или подсовывания разных css ничего не сверстать.
Может я что-то не знаю, но разве уже придуманы валидные способы:
  • заставить работать position: fixed; в 6 MSIE
  • Оперу заставить вопринять дробные значения в css?
  • привнести прозрачность в 6 MSIE?
  • заставить работать min-height в 6 MSIE ?


А прото, как можно себе жизнь упростить, например эмулируя: over и: after в MSIE.
Only those users with full accounts are able to leave comments. Log in, please.