Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 57
Про IE6 это такой троллинг, да?
Почему em внутри div с width=100% вызывает появления горизонтального скроллера?
Почему em внутри div с width=100% вызывает появления горизонтального скроллера?
Почему em внутри div с width=100% вызывает появления горизонтального скроллера?
Побуду экстрасенсом:
div {
box-sizing: border-box;
}
Это статья какого года? Я про ие6 забыл уже как про страшный сон верстальщика.
Пытался описать принципы, не привязываясь к конкретным версиям и браузерам. ИЕ, впрочем как и остальные браузеры, выступают только в качестве примеров.
Примеров чего? Примеров браузеров? ))
Судя по утверждению, что если в в IE6 что-то отображается не так, то это верстальщик что-то не так сделал (я правильно понимаю, что в нем нет багов, это всё фитчи?), и по пассажу про малоизученность IE9, создалось впечатление, что статья задержалась с публикацией на год или полтора.
Хочется попросить Вас: расскажите, хотя бы в общих чертах, как это, «верстать сразу для всех браузеров»? И чем подобный подход лучше прогрессивного улучшения? (Ведь это получаются противоречащие подходы, или нет?)
Судя по утверждению, что если в в IE6 что-то отображается не так, то это верстальщик что-то не так сделал (я правильно понимаю, что в нем нет багов, это всё фитчи?), и по пассажу про малоизученность IE9, создалось впечатление, что статья задержалась с публикацией на год или полтора.
Хочется попросить Вас: расскажите, хотя бы в общих чертах, как это, «верстать сразу для всех браузеров»? И чем подобный подход лучше прогрессивного улучшения? (Ведь это получаются противоречащие подходы, или нет?)
Некоторые заказчики сознательно требуют поддержки. Что в этом такого? За это ведь деньги платят.
«сознательно»? Проведя исследования аудитории проекта? Выяснив что в большинстве своем пользователи именно данного браузера этой версии являются «платежеспособными клиентами» дающими максимальный профит?..
Или:
— хочу чтобы работало везде!
— где везде?
— ну везде совсем везде, вы же Дизайнер(!) я вам деньги плачу сделайте чтобы «везде»!
Или:
— хочу чтобы работало везде!
— где везде?
— ну везде совсем везде, вы же Дизайнер(!) я вам деньги плачу сделайте чтобы «везде»!
«Глобальным» верстальщикам Китай здорово перемешивает карты.
мне этот сон снится по-прежнему регулярно)) так что норм всё со статьёй))
кстати, иногда только ие6-7 и могут выявить косяк а-ля незакрытый див, в то время как современные браузеры сами дописыват всё.
кстати, иногда только ие6-7 и могут выявить косяк а-ля незакрытый див, в то время как современные браузеры сами дописыват всё.
А как насчет сброса стилей!? Такую, вкусную, плюшку пропустить…
«Компания Google объявила в своем блоге о намерении прекратить поддержку веб-браузера Internet Explorer 8 в Google Apps с 15 ноября 2012 г.» — еще немного осталось =)
Действительно плюшка, действительно пропустил.
Возможно, это и к лучшему, ибо сброс стилей всего лишь адаптация под огрехи спецификации и различия реализации браузерных движков.
Возможно, это и к лучшему, ибо сброс стилей всего лишь адаптация под огрехи спецификации и различия реализации браузерных движков.
IE9 еще мало изучен и остается темной лошадкой нашего забега.
вы издеваетесь?)
Создатели браузеров, и в том числе и IE6 — не дураки. Они думали головой
К сожалению, в корпоративной среде подобной Майкросовт, не разработчики диктуют политику того КАК И ЧТО должно работать.
К сожалению, в корпоративной среде подобной Майкросовт, не разработчики диктуют политику того КАК И ЧТО должно работать.
Про валидацию здесь можно почитать. Илья Стрельцын очень хорошо описал мифы о ней.
Вчера посмотрел статистику по 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) и пр.
Не совсем согласен с некоторыми мыслями в статье. Немалая часть проблем, наблюдаемых мною в 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) и пр.
:first-child в IE7 работает же?
работает
ok, тут я ошибся :) по правде говоря, больше жду box-sizing и last-child, они сильно упрощают вёрстку.
для 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");Я отказался от expression-ов после обнаружения страшных тормозов даже при 20 элементах.
Одноразовые expression в данном случае решают проблему.
спасибо за ссылку!
Хочу только добавить к написанному мною выше: псевдокласс
Получается писать такой expression для IE7 нет смысла без поддержки в IE8, и нужно либо отказатся от
Для
Хочу только добавить к написанному мною выше: псевдокласс
:last-child не получится эмулировать с помощью expression в IE8 (где нет поддержки expression'ов, если только не включить для всех IE режим совместимости с IE7).Получается писать такой expression для IE7 нет смысла без поддержки в IE8, и нужно либо отказатся от
:last-child, либо оставить как есть.Для
:first-child expression'ы актуальны.
сверстаю для файерфокса
Интересно, а это как? Для фф нет 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).
Для фф нет 100% рабочих хаков, какие есть, например, для IEЗабудьте уже навсегда про хаки. Добавляйте к body на этапе генерации страницы классы вроде ff ff_15, и забудьте про хаки, как про страшный сон. Будет селектор вида body.ff .my_selector {… }
Пользователи Windows XP могут в крайнем случае поставитьНу если вы лично к ним придёте домой и проставите, тогда вопрос можно будет снять. А на деле программист делает то, что просит заказчик. В лучшем случае заказчика можно переубедить или послать, а рассказывать ему сказки про то, что пользователь там может или не может бесполезно.
Сафари у вас к сожалению открыть не получится.У меня linux, я даже ie открыть не могу, но тем не менее никто не отменял VirtualBox, VMWare и пр.
Под нормальными хаками я имею ввиду что-то вроде условных комментариев IE, когда можно любой фрагмент DOM настраивать для конкретного браузера не затрагивая при этом основную вёрстку.
Хаки в CSS тоже грязно. Добавить 1-2 класса к <body> или <html> намного лучше.
Вы наверно меня не поняли. Я имею ввиду древний трюк:
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; }
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; }
Почему дублирующих? На выбор. Я добавляю к <body>. И это вполне распространённая практика. Посмотрите код ya.ru, google.com, bing.com, vk.com, и особенно facebook.com. Кастомные аттрибуты для CSS, JS и т.д. уже давно используются крупными сайтами для своих нужд. Взять те же data-аттрибуты. А вот всякие там звёздочки и слеши пережитки прошлого.
Начинаем верстать в любимом файерфоксе с любимым файербагом.
Вместо этого нужно было написать «Лично я, например, начинаю верстать в любимом файерфоксе с любимым файербагом. „
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
CSS принципы