systemiv Mar 14 2012 at 18:20

Кроссбраузерные CSS

2 min

26K

CSS*HTML*

From sandbox

+27

Comments 77

olegsuv Mar 14 2012 at 18:29

Статью в закладки добавил (на всякий случай), но лично я отказался от применения префиксов, фильтров и разных pie.htc. Юзаешь старый браузер — смотри квадратные углы, никто не виновен.

systemiv Mar 14 2012 at 18:40

Не всегда можно убедить в этом клиента. Они в основном смотрят на цифры. А тот же IE7 по w3c статистике занимает 19.5 %. Мне удавалось пару раз уговорить заказчика от теней в IE6. Были весомые доводы, и он согласился, в остальных случаях доходило до ужасных вещей, о которых говорить даже стыдно

olegsuv Mar 14 2012 at 18:55

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

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

TheShock Mar 14 2012 at 21:52

А тот же IE7 по w3c статистике занимает 19.5 %.

Вы за какой год смотрели? 2005?
По статистике w3c все IE (6+7+8+9) занимают 19.5%, из них IE7 — 2.6 %.

Такая же ситуация в общем по России согласно статистике LiveInternet и в целом в мире согласно статистики StatCounter (и это учитывая Китай с его повальной IE6фикацией)

UFO just landed and posted this here

SpeCT Mar 15 2012 at 04:18

Вот тут ещё самозванцы утверждают что ie7 – 5.65%: www.w3counter.com/globalstats.php

PS: Да если и подумать, то откуда бы ie7 быть распространённым: в xp дефолт это ie6, в семёрке — ie8, a виста не с той ноги взлетела чтобы поднять рейтинг IE7 до 19%

UFO just landed and posted this here

SpeCT Mar 15 2012 at 13:57

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

BTW: Какие же новые кнопки на хабре стали няшные, не находите? ^^

UFO just landed and posted this here

TheShock Mar 15 2012 at 14:02

Ой, Вы правы. А ведь я знал об этом. Но разве статистика по остальным сайтам не более репрезнтативна?

UFO just landed and posted this here

Makito Mar 14 2012 at 18:41

Это вы объясните заказчику который смотрит под ие7-8 и недоумевает почему в макете все красиво а на сайте все квадратно.
В своей работе стараюсь свести применение pie к минимуму и верстаю по-старинке на картинках, тем более есть хорошие рецепты и для круглых уголков и для блоков с тенью. Pie часто тормозит и иногда ведет себя непредсказуемо, добавляя отступы и прочее.

zein Mar 14 2012 at 19:06

Это вы объясните заказчику который смотрит под ие7-8 и недоумевает почему в макете все красиво а на сайте все квадратно.

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

olegsuv Mar 14 2012 at 23:57

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

systemiv Mar 15 2012 at 00:01

Для того и есть кроссбраузерность, что бы страничка отображалась везде одинаково. И если клиент пишет что хочет что бы у него всё гуд работало в IE7, то придётся родить, или вообще тогда не браться

olegsuv Mar 15 2012 at 01:10

Да не вопрос, в виде исключения можно. Ессно цена верстки будет x3, а в остальном все довольны.

YogaZZZ Mar 14 2012 at 18:42

по поводу квадратных углов — немного не согласен. так как в каждом проэкте целевая аудитория разная. И далеко не все опытные пользователи, а UI — это самое главное для пользователя, а в своё время пользователь определяет успешность проэкта

f0rmat1k Mar 15 2012 at 09:46

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

olegsuv Mar 15 2012 at 14:23

Значит эти свойства экспериментальные и пока их использовать рано.
Я обычно статус свойств на всякий случай на w3 проверяю.

YogaZZZ Mar 14 2012 at 18:38

добавлю ещё немного
1. использовать box-shadow, border-radius и linear-gradient для блоков больших размеров — фатально для ФФ и оперы. так как грузит проц почти на 100% и скролить невозможно.
2. от PIE отказался в больших проэктах вовсе, так как много багов, тормозов при анимации. при шкалировании (особенно при исбользовании спрайтов для фона элемента) — вылезают ужасные баги. Для динамически создаваемых элементов вообще приходится подключать pie.js. Так что для ИЕ6-8 я просто делаю всё картинками.

derSmoll Mar 14 2012 at 18:45

Полностью согласен на счет PIE. На больших проектах практически неприменим, особенно если на страницах много динамического контента и ajax

f0rmat1k Mar 14 2012 at 19:44

Мало свойст охвачено, нет примеров работы, а те, что описаны — боян это все. Только слоупоки не юзают скругление, тени и т.д.
Вот тут нормальные примеры и описания, но тоже не все, transform'a нет, например.
Вообщем, пост совершенно ни к чему. К тому же с дизой. Вы и в самом деле думаете, что opacity поддерживается только с 11.6 оперы и 16 хрома? Но при этом почему то древний 3.6 фф указан. Зачем вообще писать кучу версий. Итак понятно, что если написано, например, chrome 15+, то это автоматически означет, что 16 и 17 тоже.

systemiv Mar 14 2012 at 19:51

Я охватил часто используемые свойства, указав внизу с каких версий они поддерживаются: Chrome 1+; Opera 10.50+
В посте стараюсь поделится опытом, а не создать справочник по CSS3.

f0rmat1k Mar 15 2012 at 09:42

Хорошо. Ток я не понял, опытом чего и зачем тогда картинки с дизой, если вы снизу итак указываете корректные данные.

Paveldest Mar 14 2012 at 19:45

Как насчет pie.js? как для меня меньше мусора в css и стабильней работает…

systemiv Mar 14 2012 at 19:53

Честно говоря, никогда не пробовал, постараюсь обязательно глянуть.

dasty Mar 14 2012 at 20:16

Очень люблю Linear-gradient, использую его очень часто, пренебрегая IE. Единственное что не нравится это большое количество приставок к свойству под разные браузеры. В хроме их даже две.

Anonym Mar 14 2012 at 21:26

А я использую SASS и меня не напрягает, что в CSS получается по 6 строк на одно свойство. Я пишу @include linear-gradient(value) и получаю кроссбраузерный css.

systemiv Mar 14 2012 at 21:29

SASS это всего лишь сахар для css. Он не делает его кроссбраузерным

Anonym Mar 15 2012 at 06:09

Кроссбраузерность не заслуга SASS. Однако мой код чист и не пестрит префиксами, а на выходе я получаю кроссбраузерную CSS.

UFO just landed and posted this here

termi Mar 14 2012 at 20:37

Можно было бы еще упомянуть code.google.com/p/ie7-js/ для исправления CSS-багов в IE6+.
Еще замечу, что и PIE.htc, и ie7.js могут работать непредсказуемо на сложных сайтах и в WEB-приложениях.

Aux Mar 14 2012 at 20:37

SVG + VML решают проблему в старых браузерах, Modernizr разрулиавает кому что, пост закрыт.

UFO just landed and posted this here

bolk Mar 14 2012 at 20:46

В этом посте я хочу поделиться своими личными наблюдениями и выводами в области применения html5 & css3.

И где это всё?

Поддержка: IE6++, FF8++, GC1++, Opera10.5+, Safary5+

Браузер называется «Safari».

systemiv Mar 14 2012 at 20:52

Что значит где? Наверху.
Насчёт браузера спасибо, не заметил ошибку. Исправил.

bolk Mar 14 2012 at 20:54

Я не вижу личных наблюдений и выводов, потому и спрашиваю. В тексте рассказ своими словами сайта «Can I Use» + совет использовать PIE.

systemiv Mar 14 2012 at 20:58

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

Nico_izo Mar 14 2012 at 20:57

Простите, но что?! Если мои глаза мне не изменяют, то у вас написано, что border-radius: Firefox 8+.
Тем не менее, без префикса он появился в FF4.
А за упоминание только -webkit-gradient без -webkit-linear-gradient поныне надо расстреливать.
К слову о градиентах: С ними забавная ситуация, когда внезапно добавилось ключевое слово to. И да, теперь в рамках одного браузера будет минимум два свойства. А в вебките все три, благодаря их проприетарному свойству. А ещё в опере они (Линейные) с 11.10.

systemiv Mar 14 2012 at 21:08

С недочетом в FF3.6 огромное спасибо. Поправил.
Насчёт «А за упоминание только -webkit-gradient без -webkit-linear-gradient поныне надо расстреливать.» не соглашусь. В браузерах на движке webkit (Safari, Chrome, Arora, Konqueror и др.) необходимо указывать свойство градиента именно так, как я его описал.

    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#9FDCF2), to(#D0EEF9));

Nico_izo Mar 14 2012 at 21:20

Если не верите мне, то вот. Правильней указывать и то, и это, и другое. А ещё надо указывать fallback color для древних браузеров.

systemiv Mar 14 2012 at 21:28

Да Вы правы, я посмотрел на непроверенных сайтах, типо этого:
westciv.com/tools/gradients/
Как я понял, синтаксис который я описал более старый(на 1 год), чем ваш
Но всё равно огромное спасибо, сейчас поправлю

systemiv Mar 14 2012 at 21:33

Хотя подождите, наверху же есть пример для webkit. Присмотритесь

marsh Mar 14 2012 at 23:55

IE: эта проблема легко решается с помощью PIE.htc

К слову говоря, с pie не все так легко решается, кроме того что выскакивают непонятные баги, так еще и ие8 отказывается без pos:relative работать.

Оpacity в большинстве случаев лучше заменять на bg:rgba

Кстати для градиентов есть неплохой генератор

systemiv Mar 14 2012 at 23:59

Ок. Спасибо огромное за генератор, было бы больше кармы, плюсанул=)
Насчёт opacity, в каких случаях? rgba не поддерживается в IE точно так же как и остальные св-ва.

marsh Mar 15 2012 at 00:42

через фильтр gradient в осле решается это проблема.
Просто в отличие от opacity, полупрозрачность задается не для всего блока (включая и все его содержимое), а только для фона. Это чаще встречаемая задача ;)

Pozadi Mar 15 2012 at 00:49

Люди посмотрите в сторону compass-style.org/, недавно начал его использовать, и теперь, наверно, никогда не буду делать сайт без него. Не вижу никаких причин не использовать его.

systemiv Mar 15 2012 at 00:53

Простите, Вы наверное не правильно поняли тему поста. Здесь обсуждается кроссбраузерность а не сахар для css

Pozadi Mar 15 2012 at 01:00

Компас помогает решать проблемы кросбраузерности. Я пишу @include border-radius(3px); вместо border-radius:3px; и компас превращает это в нужные строчки с актуальными префиксами. Более того, если ситуация изменится, и например появится новый префикс, я не буду бешено бегать по css и добавлять его, я просто обновлю компас.

Мой комментарий релевантен теме поста в любом случае :)

timonstr Mar 15 2012 at 01:40

Кроссбраузерность — это когда во всех браузерах работает. Добавление вендорных префиксов != кроссбраузерно.

Pozadi Mar 15 2012 at 01:51

Кроссбраузерность — это когда работает в тех браузерах, которые было решено поддерживать на конкретном проекте. Если обобщить, то кросбраузерность — это когда в работает более чем в одном браузере.

В любом случае добовление префиксов — одна из техник используемая для этого.

И компас не только префиксы умеет добавлять, а может, например, помочь работать с тем же CSS3 Pie compass-style.org/reference/compass/css3/pie/.

timonstr Mar 15 2012 at 03:08

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

DoubleG Mar 15 2012 at 03:01

В последнем примере HEX цвет выбран с юмором.

Seldon Mar 15 2012 at 09:39

Хм… простите но по мне статья из разряда «Мне хотелось что-то написать и не важно что оно уже 100500 раз везде обсуждалось». Ну не тянет имхо подобный материал на статью, слабенький очень.

torbasow Mar 15 2012 at 09:56

А при чём тут HTML5?

Остаётся решить проблему с FF 3.6 и IE7 — IE4.

С чем?! Не пугайте так, пожалуйста.

EvgeniyLazarev Mar 15 2012 at 10:34

После того, как прочитал, что вы предлагаете для border-radius не делать отдельное свойство с префиксом -moz, но при этом использовать глючный и тормозящий PIE.htc, я перестал это читать.

UFO just landed and posted this here

systemiv Mar 15 2012 at 11:29

У меня стоит Small HTTP server, он таких проблем не создаёт. Спасибо за наводку с Apache, самому даже стало интересно

UFO just landed and posted this here

Ernado Mar 15 2012 at 15:40

Возможно IE9 переключается в режим совместимости? Проверьте какой режим стоит в обоих случаях.

UFO just landed and posted this here

Delka Mar 21 2012 at 03:32

Это дефолтное поведение начиная с IE8, чтоб зачастую-кривые интранетовские сайты не поломались.

GreatRash Mar 15 2012 at 11:03

Это реклама PIE?

UFO just landed and posted this here

egorinsk Mar 15 2012 at 18:55

Кто-нибудь проверял побочные эффекты от использования PIE.htc? Я помню, в том же ИЕ6 при использовании AlphaImageLoader для прозрачных png тормозилась загрузка сайта, так что проще было использовать PNG8 всюду, где возможно.

Как-то странно советовать использовать этот скрипт без анализа негативных последствий.

mapron Mar 16 2012 at 14:19

Как по мне — так использовать можно, но как и другие инструменты — с умом. Использовал в двух проектах, предварительно почитал документацию про known issues — проблем не было. Анимированные и динамические блоки, проблем даже в ие6 не было. Но считаю что пихать его везде и всюду не стоит.
Создал у себя в LESS mixin:

.iesupport(){
 	position: relative;
	behavior: url(/PIE.htc);
}

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

UFO just landed and posted this here

Delka Mar 21 2012 at 03:31

Свойства с префиксами нужно писать ДО базового свойства, сколько раз уже писали.

Zippovich Apr 13 2012 at 17:06

.box_round {
-webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
-moz-border-radius: 12px; /* FF1-3.6 */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

.box_shadow {
-webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Saf3-4, iOS 4.0.2 — 4.2, Android 2.3+ */
-moz-box-shadow: 0px 0px 4px 0px #ffffff; /* FF3.5 — 3.6 */
box-shadow: 0px 0px 4px 0px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}

.box_gradient {
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -ms-linear-gradient(top, #444444, #999999); /* IE10 */
background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
background-image: linear-gradient(to bottom, #444444, #999999);
}