Пытался описать принципы, не привязываясь к конкретным версиям и браузерам. ИЕ, впрочем как и остальные браузеры, выступают только в качестве примеров.

-1

nicothin 3 окт 2012 в 04:54

Примеров чего? Примеров браузеров? ))

Судя по утверждению, что если в в IE6 что-то отображается не так, то это верстальщик что-то не так сделал (я правильно понимаю, что в нем нет багов, это всё фитчи?), и по пассажу про малоизученность IE9, создалось впечатление, что статья задержалась с публикацией на год или полтора.

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

teonoman 2 окт 2012 в 21:59

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

Kaaboeld 3 окт 2012 в 11:13

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

Deenamo 3 окт 2012 в 00:13

«Глобальным» верстальщикам Китай здорово перемешивает карты.

eno_one 16 окт 2012 в 14:49

мне этот сон снится по-прежнему регулярно)) так что норм всё со статьёй))
кстати, иногда только ие6-7 и могут выявить косяк а-ля незакрытый див, в то время как современные браузеры сами дописыват всё.

AGvin 2 окт 2012 в 21:58

А как насчет сброса стилей!? Такую, вкусную, плюшку пропустить…

AGvin 2 окт 2012 в 22:03

«Компания Google объявила в своем блоге о намерении прекратить поддержку веб-браузера Internet Explorer 8 в Google Apps с 15 ноября 2012 г.» — еще немного осталось =)

aratak 2 окт 2012 в 22:05

Действительно плюшка, действительно пропустил.

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

Shniper 2 окт 2012 в 22:35

IE9 еще мало изучен и остается темной лошадкой нашего забега.

вы издеваетесь?)

aratak 3 окт 2012 в 10:55

Исправил на «последний IE»

НЛО прилетело и опубликовало эту надпись здесь

demimurych 2 окт 2012 в 23:17

Создатели браузеров, и в том числе и IE6 — не дураки. Они думали головой
К сожалению, в корпоративной среде подобной Майкросовт, не разработчики диктуют политику того КАК И ЧТО должно работать.

cadmi 3 окт 2012 в 01:29

Вот откуда, жёваный крот, откуда? Откуда в слове Microsoft, написанном кириллицей, берётся буква «в»?

demimurych 3 окт 2012 в 01:30

По всей вероятности от туда же, откуда и взялась идиома «жёваный крот»

НЛО прилетело и опубликовало эту надпись здесь

psywalker 2 окт 2012 в 23:23

Про валидацию здесь можно почитать. Илья Стрельцын очень хорошо описал мифы о ней.

-1

faiwer 3 окт 2012 в 00:21

Вчера посмотрел статистику по 5 сайтам. От 0.5% до 3% IE7. Думаю с нового года откажусь от него совсем. А IE6 лучше даже не упоминать вслух :)

Не совсем согласен с некоторыми мыслями в статье. Немалая часть проблем, наблюдаемых мною в IE7 была и в IE8, но отсутствовала в IE9, а IE9 преподносил свои сюрпризы. К примеру он игнорировал прозрачный элемент <button> с position: absolute, расположенный поверх чего-либо, до тех пор пока я не задал ему вместо нативной прозрачности — 1-пиксельный прозрачный рисунок. IE7 страшно выносил мозг не багами аля элемент сполз, или особенностями аля float: right + %, а своими фокусами с рендером, когда страница прыгает, скачет и моргает при :hover эффектах. Зачастую натыкался на столь удивительные ситуации что не мог подвести под баг никакой здравой логики. Чаще всего получал страшные проблемы в IE7 в ситуациях когда много relative, z-index, :hover, float, % и всё это рядом. Помогало только методичное расставление zoom: 1 и прочих шаманств. Увидеть логику в таких глюках удавалось крайне редко.

Отказавшись от IE7 можно получить такие вкусности как: :last-child, :first-child, box-sizing, float: right + %, nth-child (не уверен про ie8) и пр.

DenisZ 3 окт 2012 в 00:52

:first-child в IE7 работает же?

bogi 3 окт 2012 в 01:09

работает

faiwer 3 окт 2012 в 01:28

ok, тут я ошибся :) по правде говоря, больше жду box-sizing и last-child, они сильно упрощают вёрстку.

bogi 3 окт 2012 в 20:00

для IE7 last-child можно описать с помощью expression:
css-property: expression(this.nextSibling == null ? "value for last child" : "general value");

например:
border-right: expression(this.nextSibling == null ? "none" : "1px solid red");

НЛО прилетело и опубликовало эту надпись здесь

faiwer 3 окт 2012 в 20:09

Я отказался от expression-ов после обнаружения страшных тормозов даже при 20 элементах.

Metaller 6 окт 2012 в 20:39

Одноразовые expression в данном случае решают проблему.

bogi 8 окт 2012 в 14:36

спасибо за ссылку!

Хочу только добавить к написанному мною выше: псевдокласс :last-child не получится эмулировать с помощью expression в IE8 (где нет поддержки expression'ов, если только не включить для всех IE режим совместимости с IE7).
Получается писать такой expression для IE7 нет смысла без поддержки в IE8, и нужно либо отказатся от :last-child, либо оставить как есть.
Для :first-child expression'ы актуальны.

Metaller 8 окт 2012 в 14:42

Я не припомню случая, чтобы без last-child нельзя было обойтись, всегда можно заменить на first-child или использовать другой способ.

CyberAP 3 окт 2012 в 03:11

сверстаю для файерфокса

Интересно, а это как? Для фф нет 100% рабочих хаков, какие есть, например, для IE. Вариант с media queries хаками не рассматриваю, т.к. очень высок риск что это всё полетит с выходом новой версии браузера.
Кстати, если уж вы работаете под файерфоксом то с большой вероятностью ваша вёрстка не поползёт и в других браузерах (это не отменяет того факта что её надо там проверять). Это я к тому что фф является одним из самых забагованных браузеров в плане поддержки css. Взять к примеру недавний релиз FF 15.01, попробуйте загрузить какой-нибудь свой проект где использован border-image. Изображение у вас слетит, я это гарантирую. Или ещё можно вспомнить весёлую комбинацию float + position:absolute; которая приводит в ff к весьма интересным эффектам :)

если будет выглядеть хорошо в IE7, мало что придется исправлять в IE6

Эти два браузера давно можно выкинуть из головы. Пользователи Windows XP могут в крайнем случае поставить Internet Explorer 8 (он поставится сам из автообновления), либо какой-нибудь нормальный браузер, а чем меньше сайтов их поддерживает тем быстрее уменьшается доля IE.

Немного реже открываем оперу и сафари

Сафари у вас к сожалению открыть не получится. Поддержка под Windows больше не осуществляется, так что заниматься нормальной оптимизацией под Safari теперь могу только маководы, что в принципе и к лучшему, т.к. версия под Win была ужасной.

Отдельно упомяну про структуру css файлов и картинок

Не существует правильных или неправильных способов располагать файлы. Есть удобные или неудобные способы. Каждый разработчик сам в праве решать какой структуры придерживаться. Если, к примеру, в модели БЭМ структура чётко видна, то на каких-либо мелких проектах, где изображений от силы штук 15-20, структура может быть абсолютно любой, если она удобна разработчикам. Нет смысла хранить десяток изображений в отдельных папках, когда можно их держать всего в одной папке и это никак не ухудшит скорость работы.
К счастью существуют препроцессоры, с которыми создавать и изменять структуры данных проекта любой сложности не составляет труда, так что проблема организации актуальна только если вы пишете код в блокноте.

В целом ожидал увидеть описание и применение на практике различных техник написания CSS, ведь статья так и называется «CSS принципы», хотя про сам CSS-код вообще ни слова (ах да, .content).

-1

faiwer 3 окт 2012 в 10:21

Для фф нет 100% рабочих хаков, какие есть, например, для IE

Забудьте уже навсегда про хаки. Добавляйте к body на этапе генерации страницы классы вроде ff ff_15, и забудьте про хаки, как про страшный сон. Будет селектор вида body.ff .my_selector {… }

Пользователи Windows XP могут в крайнем случае поставить

Ну если вы лично к ним придёте домой и проставите, тогда вопрос можно будет снять. А на деле программист делает то, что просит заказчик. В лучшем случае заказчика можно переубедить или послать, а рассказывать ему сказки про то, что пользователь там может или не может бесполезно.

Сафари у вас к сожалению открыть не получится.

У меня linux, я даже ie открыть не могу, но тем не менее никто не отменял VirtualBox, VMWare и пр.

-1

НЛО прилетело и опубликовало эту надпись здесь

CyberAP 3 окт 2012 в 19:56

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

НЛО прилетело и опубликовало эту надпись здесь

faiwer 3 окт 2012 в 20:10

Хаки в CSS тоже грязно. Добавить 1-2 класса к <body> или <html> намного лучше.

НЛО прилетело и опубликовало эту надпись здесь

faiwer 3 окт 2012 в 20:17

Вы наверно меня не поняли. Я имею ввиду древний трюк:

1. добавляем два класса аля browser_ie, browser_ie_7 к <body> или <html>элементу. Браузеры легко определяются по user-agent-у
2. пишем «хаки» так .browser_ie_7 .problem_selector { zoom:1; display: inline; }

Это предельно понятно, в отличие от всяких там звёздочек и слешей, и гарантировано избавляет нас от проблем с новыми браузерами, новыми версиями браузеров и пр… + Мы не имеем ограничений по браузерам и их версиям.

По поводу препроцессоров, вот тот же код на SCSS: #{ $ie_7 } & { zoom: 1; display: inline; }

НЛО прилетело и опубликовало эту надпись здесь

faiwer 3 окт 2012 в 20:28

Почему дублирующих? На выбор. Я добавляю к <body>. И это вполне распространённая практика. Посмотрите код ya.ru, google.com, bing.com, vk.com, и особенно facebook.com. Кастомные аттрибуты для CSS, JS и т.д. уже давно используются крупными сайтами для своих нужд. Взять те же data-аттрибуты. А вот всякие там звёздочки и слеши пережитки прошлого.