Comments 77
Статью в закладки добавил (на всякий случай), но лично я отказался от применения префиксов, фильтров и разных pie.htc. Юзаешь старый браузер — смотри квадратные углы, никто не виновен.
Не всегда можно убедить в этом клиента. Они в основном смотрят на цифры. А тот же IE7 по w3c статистике занимает 19.5 %. Мне удавалось пару раз уговорить заказчика от теней в IE6. Были весомые доводы, и он согласился, в остальных случаях доходило до ужасных вещей, о которых говорить даже стыдно
Справедливости ради, нужно заметить что лично я верстаю чаще сайты для русско-язычной аудитории, и тут стастистику стоит смотреть не заморскую, а ближе к нашей (тот же liveinternet), там и доля IE другая.
Обычно статистика + прайс-лист помогают заказчику более адекватно выставлять требования.
Обычно статистика + прайс-лист помогают заказчику более адекватно выставлять требования.
А тот же 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
UFO just landed and posted this here
Вот тут ещё самозванцы утверждают что ie7 – 5.65%: www.w3counter.com/globalstats.php
PS: Да если и подумать, то откуда бы ie7 быть распространённым: в xp дефолт это ie6, в семёрке — ie8, a виста не с той ноги взлетела чтобы поднять рейтинг IE7 до 19%
PS: Да если и подумать, то откуда бы ie7 быть распространённым: в xp дефолт это ie6, в семёрке — ie8, a виста не с той ноги взлетела чтобы поднять рейтинг IE7 до 19%
Ой, Вы правы. А ведь я знал об этом. Но разве статистика по остальным сайтам не более репрезнтативна?
Это вы объясните заказчику который смотрит под ие7-8 и недоумевает почему в макете все красиво а на сайте все квадратно.
В своей работе стараюсь свести применение pie к минимуму и верстаю по-старинке на картинках, тем более есть хорошие рецепты и для круглых уголков и для блоков с тенью. Pie часто тормозит и иногда ведет себя непредсказуемо, добавляя отступы и прочее.
В своей работе стараюсь свести применение pie к минимуму и верстаю по-старинке на картинках, тем более есть хорошие рецепты и для круглых уголков и для блоков с тенью. Pie часто тормозит и иногда ведет себя непредсказуемо, добавляя отступы и прочее.
Это вы объясните заказчику который смотрит под ие7-8 и недоумевает почему в макете все красиво а на сайте все квадратно.
Именно поэтому, мы стараемся в техзадании заранее оговаривать под что верстается сайт. Часто заказчик даже не обращает на это внимание, так что это может помочь избежать проблем в будущем.
Объяснял. Бывает что достаточно сказать что у него кривой браузер поэтому сайт выглядит хуже чем на самом деле. В сложных случаях помогает пример-аналогия с чем-нибудь, например, почему в бентли ездить комфортнее чем в жигуле и что в этом случае строители дороги не причем.
по поводу квадратных углов — немного не согласен. так как в каждом проэкте целевая аудитория разная. И далеко не все опытные пользователи, а UI — это самое главное для пользователя, а в своё время пользователь определяет успешность проэкта
Скорее всего вы хотели сказать, что отказались префиксов для теней и скурглений. Ведь есть много ксс свойств, которые даже в новейших браузерах не работают без префиксов.
добавлю ещё немного
1. использовать box-shadow, border-radius и linear-gradient для блоков больших размеров — фатально для ФФ и оперы. так как грузит проц почти на 100% и скролить невозможно.
2. от PIE отказался в больших проэктах вовсе, так как много багов, тормозов при анимации. при шкалировании (особенно при исбользовании спрайтов для фона элемента) — вылезают ужасные баги. Для динамически создаваемых элементов вообще приходится подключать pie.js. Так что для ИЕ6-8 я просто делаю всё картинками.
1. использовать box-shadow, border-radius и linear-gradient для блоков больших размеров — фатально для ФФ и оперы. так как грузит проц почти на 100% и скролить невозможно.
2. от PIE отказался в больших проэктах вовсе, так как много багов, тормозов при анимации. при шкалировании (особенно при исбользовании спрайтов для фона элемента) — вылезают ужасные баги. Для динамически создаваемых элементов вообще приходится подключать pie.js. Так что для ИЕ6-8 я просто делаю всё картинками.
Мало свойст охвачено, нет примеров работы, а те, что описаны — боян это все. Только слоупоки не юзают скругление, тени и т.д.
Вот тут нормальные примеры и описания, но тоже не все, transform'a нет, например.
Вообщем, пост совершенно ни к чему. К тому же с дизой. Вы и в самом деле думаете, что opacity поддерживается только с 11.6 оперы и 16 хрома? Но при этом почему то древний 3.6 фф указан. Зачем вообще писать кучу версий. Итак понятно, что если написано, например, chrome 15+, то это автоматически означет, что 16 и 17 тоже.
Вот тут нормальные примеры и описания, но тоже не все, transform'a нет, например.
Вообщем, пост совершенно ни к чему. К тому же с дизой. Вы и в самом деле думаете, что opacity поддерживается только с 11.6 оперы и 16 хрома? Но при этом почему то древний 3.6 фф указан. Зачем вообще писать кучу версий. Итак понятно, что если написано, например, chrome 15+, то это автоматически означет, что 16 и 17 тоже.
Как насчет pie.js? как для меня меньше мусора в css и стабильней работает…
Очень люблю Linear-gradient, использую его очень часто, пренебрегая IE. Единственное что не нравится это большое количество приставок к свойству под разные браузеры. В хроме их даже две.
Можно было бы еще упомянуть code.google.com/p/ie7-js/ для исправления CSS-багов в IE6+.
Еще замечу, что и PIE.htc, и ie7.js могут работать непредсказуемо на сложных сайтах и в WEB-приложениях.
Еще замечу, что и PIE.htc, и ie7.js могут работать непредсказуемо на сложных сайтах и в WEB-приложениях.
SVG + VML решают проблему в старых браузерах, Modernizr разрулиавает кому что, пост закрыт.
В этом посте я хочу поделиться своими личными наблюдениями и выводами в области применения html5 & css3.И где это всё?
Поддержка: IE6++, FF8++, GC1++, Opera10.5+, Safary5+Браузер называется «Safari».
Простите, но что?! Если мои глаза мне не изменяют, то у вас написано, что border-radius: Firefox 8+.
Тем не менее, без префикса он появился в FF4.
А за упоминание только -webkit-gradient без -webkit-linear-gradient поныне надо расстреливать.
К слову о градиентах: С ними забавная ситуация, когда внезапно добавилось ключевое слово to. И да, теперь в рамках одного браузера будет минимум два свойства. А в вебките все три, благодаря их проприетарному свойству. А ещё в опере они (Линейные) с 11.10.
Тем не менее, без префикса он появился в FF4.
А за упоминание только -webkit-gradient без -webkit-linear-gradient поныне надо расстреливать.
К слову о градиентах: С ними забавная ситуация, когда внезапно добавилось ключевое слово to. И да, теперь в рамках одного браузера будет минимум два свойства. А в вебките все три, благодаря их проприетарному свойству. А ещё в опере они (Линейные) с 11.10.
С недочетом в FF3.6 огромное спасибо. Поправил.
Насчёт «А за упоминание только -webkit-gradient без -webkit-linear-gradient поныне надо расстреливать.» не соглашусь. В браузерах на движке webkit (Safari, Chrome, Arora, Konqueror и др.) необходимо указывать свойство градиента именно так, как я его описал.
Насчёт «А за упоминание только -webkit-gradient без -webkit-linear-gradient поныне надо расстреливать.» не соглашусь. В браузерах на движке webkit (Safari, Chrome, Arora, Konqueror и др.) необходимо указывать свойство градиента именно так, как я его описал.
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#9FDCF2), to(#D0EEF9));
Если не верите мне, то вот. Правильней указывать и то, и это, и другое. А ещё надо указывать fallback color для древних браузеров.
Да Вы правы, я посмотрел на непроверенных сайтах, типо этого:
westciv.com/tools/gradients/
Как я понял, синтаксис который я описал более старый(на 1 год), чем ваш
Но всё равно огромное спасибо, сейчас поправлю
westciv.com/tools/gradients/
Как я понял, синтаксис который я описал более старый(на 1 год), чем ваш
Но всё равно огромное спасибо, сейчас поправлю
IE: эта проблема легко решается с помощью PIE.htc
К слову говоря, с pie не все так легко решается, кроме того что выскакивают непонятные баги, так еще и ие8 отказывается без pos:relative работать.
Оpacity в большинстве случаев лучше заменять на bg:rgba
Кстати для градиентов есть неплохой генератор
Ок. Спасибо огромное за генератор, было бы больше кармы, плюсанул=)
Насчёт opacity, в каких случаях? rgba не поддерживается в IE точно так же как и остальные св-ва.
Насчёт opacity, в каких случаях? rgba не поддерживается в IE точно так же как и остальные св-ва.
Люди посмотрите в сторону compass-style.org/, недавно начал его использовать, и теперь, наверно, никогда не буду делать сайт без него. Не вижу никаких причин не использовать его.
Простите, Вы наверное не правильно поняли тему поста. Здесь обсуждается кроссбраузерность а не сахар для css
Компас помогает решать проблемы кросбраузерности. Я пишу
Мой комментарий релевантен теме поста в любом случае :)
@include border-radius(3px); вместо border-radius:3px; и компас превращает это в нужные строчки с актуальными префиксами. Более того, если ситуация изменится, и например появится новый префикс, я не буду бешено бегать по css и добавлять его, я просто обновлю компас.Мой комментарий релевантен теме поста в любом случае :)
Кроссбраузерность — это когда во всех браузерах работает. Добавление вендорных префиксов != кроссбраузерно.
Кроссбраузерность — это когда работает в тех браузерах, которые было решено поддерживать на конкретном проекте. Если обобщить, то кросбраузерность — это когда в работает более чем в одном браузере.
В любом случае добовление префиксов — одна из техник используемая для этого.
И компас не только префиксы умеет добавлять, а может, например, помочь работать с тем же CSS3 Pie compass-style.org/reference/compass/css3/pie/.
В любом случае добовление префиксов — одна из техник используемая для этого.
И компас не только префиксы умеет добавлять, а может, например, помочь работать с тем же CSS3 Pie compass-style.org/reference/compass/css3/pie/.
В последнем примере HEX цвет выбран с юмором.
Хм… простите но по мне статья из разряда «Мне хотелось что-то написать и не важно что оно уже 100500 раз везде обсуждалось». Ну не тянет имхо подобный материал на статью, слабенький очень.
А при чём тут HTML5?
С чем?! Не пугайте так, пожалуйста.
Остаётся решить проблему с FF 3.6 и IE7 — IE4.
С чем?! Не пугайте так, пожалуйста.
После того, как прочитал, что вы предлагаете для border-radius не делать отдельное свойство с префиксом -moz, но при этом использовать глючный и тормозящий PIE.htc, я перестал это читать.
UFO just landed and posted this here
Это реклама PIE?
UFO just landed and posted this here
Кто-нибудь проверял побочные эффекты от использования PIE.htc? Я помню, в том же ИЕ6 при использовании AlphaImageLoader для прозрачных png тормозилась загрузка сайта, так что проще было использовать PNG8 всюду, где возможно.
Как-то странно советовать использовать этот скрипт без анализа негативных последствий.
Как-то странно советовать использовать этот скрипт без анализа негативных последствий.
Как по мне — так использовать можно, но как и другие инструменты — с умом. Использовал в двух проектах, предварительно почитал документацию про known issues — проблем не было. Анимированные и динамические блоки, проблем даже в ие6 не было. Но считаю что пихать его везде и всюду не стоит.
Создал у себя в LESS mixin:
и применял его для некоторых блоков, для которых критичны эти уголки, тенюшки и прочая. Все довольны )
В общем, либо проектов сложных не было, либо я везунчик, не знаю.
Создал у себя в LESS mixin:
.iesupport(){
position: relative;
behavior: url(/PIE.htc);
}
и применял его для некоторых блоков, для которых критичны эти уголки, тенюшки и прочая. Все довольны )
В общем, либо проектов сложных не было, либо я везунчик, не знаю.
UFO just landed and posted this here
Свойства с префиксами нужно писать ДО базового свойства, сколько раз уже писали.
.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);
}
-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);
}
Sign up to leave a comment.
Кроссбраузерные CSS