Набор кроссбраузерных CSS3 свойств

[artishok]

IE 6-8

Хватит уже. Кто их продолжает использовать, тот сам себе враг.

[popovsergey]

а если 40% вашей аудитории использует IE7 — 8? Мы не можем их бросить!

[popovsergey]

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

[artishok]

Можем. ИЕ 6-8 уже давно история.

[popovsergey]

ну я считаю это неверным подходом. Пусть каждый останется при своем мнении

[artishok]

Пока такие как вы поддерживают динозавров, то эти 40% процентов будут существовать…

[shornikov]

а Вы, рассматривайте сайт, не как свой развлекательный проект для остальных, а как заработок. Будете и 5 версию поддерживать.

[artishok]

Потратить ресурсы на развитие/раскрутку и получение выгоды или потратить деньги на поддержку старых браузеров… Хмм… сложный выбор

[shornikov]

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

Для меня это нечто, типа интернет-магазина или форума-блога.
Сделал один раз, работает пару лет, до редизайна.
Приносит N денег, если мы забили на старые IE или N+20% — если не такие принципиальные.
Мне отсутствие «принципов» приносит +1 среднюю зарплату по Уралу.

Если это онлайн-игра — наверное, всё по-другому.

[JCHouse]

Онлайн игра работающая в ИЕ 5? Покажите!

[shornikov]

У меня сложилось впечатление, что Artishok поставит заглушку :)

[Evengard]

IE6-7 да, а IE8 ещё жив. И не уверен я что даже end of life WinXP сразу её уничтожит

[artishok]

8-ка жива лишь потому что разработчики продолжают её поддерживать…

[Evengard]

Нет. 8-рка жива потому что многие компании, обычно не очень связанные с IT, держат Windows XP и не позволяют установку других программ, в том числе и браузеров. И в ЛУЧШЕМ случае там есть IE8 — последняя версия IE для WinXP.

[JCHouse]

Взять ваш пример с закругленными уголками: префикс нужны для FF < 4, Chrome < 5, Safari < 5, в Opera и MS (вообще префикс не иcпользовался его сразу включили в поддержку без тестового режима) Отсюда: caniuse.com/#search=border-radius.
Неужели доля этих версий на вашем портале настолько значимая чтобы тратить на это все ресурсы. ИМХО значение префиксов, а точнее библиотек «решающих эту проблему» несколько преувеличена.
А касательно конкретно этой статьи это лишь размыливает внимание читателей.

[popovsergey]

Здесь просто написана максимальная версия, конечно мы все не используем

[popovsergey]

вы считаете, что префиксы на данный момент уже можно почти не использовать во всех свойствах?

[pepelsbey]

-moz- и -webkit-border-radius, -khtml-opacity? Вы кажется провели последние три года на необитаемом острове.

Первое нужно Firefox 3.6 (2010 год) и Safari 4 (2008 год), а второе браузеру, которого не существует.

[popovsergey]

не спорю, может я конечно переборщил с префиксами, я хотел показать код обеспечивающий максимальную поддержку, -khtml- я кстати включил в последний момент, не проверил

[zelenin]

привет, web 2.0 из 2005-го)

[CyberAP]

Писать вендорные префиксы больше не нужно, сейчас каждый может автоматически их проставить в зависимости от личных преподчтений поддержки браузеров. Речь, конечно же, про autoprefixer.
А вообще, эмуляция градиентов IE это высшая степень издевательства над пользователями старых IE.
Плюс, писать невалидный CSS для IE вместе с общим — вот это как раз и есть неправильная практика, этому учить не стоит. Для старых IE всегда должен подключаться отдельный файл.

[popovsergey]

А вообще, эмуляция градиентов IE это высшая степень издевательства над пользователями старых IE.

а есть альтернативное решение?

autoprefixer крутая штука, спасибо, почитаю

[CyberAP]

Да, называется metro-style :) Ну, и дедовский метод картинками никто не отменял. Умные браузеры картинку не скушают, а сразу отобразят css-градиент.

[popovsergey]

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

[popovsergey]

я показал все в одном для наглядности, понятно что они должны идти в разные файлы

[CyberAP]

Тогда я не понимаю зачем вы учите людей вот этому:

    *display: inline;
    _height: 250px;

Эти свойства надо выносить просто в отдельный CSS без хаков.

[popovsergey]

я показал все в одном для наглядности

[popovsergey]

я понял, спасибо за качественный комментарий, надо поправить, пока «вредными советами» на начлаи пользоваться. Вы считаете что htc вообще лучше не использовать? Оставлять их без красивостей так сказать

[popovsergey]

Спасибо за совет!

Может быть сейчас идет тенденция плоского дизайна, чтобы проще было его реализовывать?)

[popovsergey]

да я с вами согласен, но вот заказчики порой стоят насмерть…

[popovsergey]

Спасибо вам за ценные советы! Надо совершенствоваться)

[vanxant]

Про ценник поддержу, работает безотказно.
«Вёрстка для старых браузеров (IE8 и ниже): +100% к стоимости вёрстки, при этом визуальные эффекты только при наличии технической возможности».

[srgg]

Не верю, что вы не слышали о SASS+Compass, что позволяет обходиться без таких вот записей:
-webkit-border-radius:10px;
и т.п., включая все продвинутые возможности CSS3.
Вернее, записи-то будут, но генерируют их подключаемые миксины Compass. Собственно, его смысл в том и есть, чтобы автоматически создавать CSS, адаптированный для всех вендоров и, т.о., сэкономить вам тонны времени (включая потраченное на поиск ошибок).
Или я чего-то не учёл?

[popovsergey]

Ну тут речи нигде не шло про SASS, я слышал и знаю его возможности. Здесь речь о чистом css, сейчас не все еще начали SASS и тд пользоваться.

[srgg]

SASS + Compass дают вам на выходе тот самый «чистый» CSS. Я вас прекрасно понимаю — переключаться на что-то новое, — это всегда некоторый вызов, т.к. требует времени (и часто — нервов), но я не припомню ситуации, когда оставаться в рамках той или иной «чистой» технологии оказывалось бы выгодней. Так что, те, кто «ещё не начали им пользоваться» или рано или поздно начнут, или проиграют в конкурентной борьбе тем, кто уже начал.
Хорошая новость, кстати, в том, что ничего особо сложного в освоении вышесказанного нет. Кроме того, по крайней мере, некоторые IDE (netbeans в частности), берут заботу об интеграции с препроцессорами на себя, вам практически не надо будет на это отвлекаться. Поверьте, в результате вы очень много выиграете, говорю вам как коллега, который ок. 15 лет писал на «чистом» CSS.

[popovsergey]

Я сейчас использую LESS в некоторых проектах, но как я понял, он не так хорош как SASS с компасом. Не думаю что очень сложно переходить, просто надо попробовать! Спасибо вам

[srgg]

Я тоже начинал с LESS. И для начала это, вероятно, лучше, потому что:
1. Он проще
2. Его можно использовать без компиляции CSS, простым подключением less.js
Но у SASS есть радикальное преимущество и это именно Compass, и то, о чём я говорил выше — вы практически избавляетесь от головной боли, связанной с адаптацией стилей для разных браузеров — он делает всю магию. Просто пишете, например,
@include border-radius(4px);
что не слишком отличается синтаксически от обычного CSS, а остальное он дописывает сам.
Есть очень неплохая книга, наз. Sass & Compass in action, которую можно быстро прочесть буквально за пару дней и сразу перейти на новый уровень.

[popovsergey]

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

Я обязательно изучу книгу, которые вы указываете, спасибо!

[vc54]

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

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

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

Итог: все хорошо, главное — не останавливаться. И спасибо за пост.

[lorndesign]

Не забываем, что PIE насилует ваш DOM и в хвост, и в гриву, если проект больше, чем просто landing-page.

[megahertz]

-moz-inline-stack можно спокойно удалять, inline-block поддерживается с 3й версии

[popovsergey]

учел, спасибо!

[lolmaus]

Для полноты картины не хватает Respond.js, который, к тому же, прекрасно взаимодействует с Selectivizr. Как подружить Respond.js и Selectivizr, я описал тут: stackoverflow.com/a/16732064/901944

[mitrand88]

Благодарен автору что поднял такую тему. О многих свойствах не знал. В кросс-браузерность вёрстки только начинаю вникать.