На заметку: кроссбраузерный CSS display: inline-block

15.03.2010

Категория: Веб-разработка

2 коммент. »

кроссбраузерный CSS display: inline-block
Очень полезная вещь, особенно при вёрстке всевозможных кнопок. Вешаем на нужный блок класс inline:

.inline {
	display: -moz-inline-stack; /* FF2 */
	display: inline-block; /* good browsers */
}
 
*html .inline {
	overflow: hidden;
	zoom: 1;
	display: inline;
/* IE6 */}
 
*+html .inline {
	display: inline;
/* IE7 */}
, ,

10 CSS фишек, которые станут доступны после исчезновния IE6

15.04.2009

Категория: Веб-разработка

Вольный перевод статьи “10 Cool Things We’ll Be Able To Do Once IE6 Is Dead”.

wanted-dead

Наш старый “любимый” ослик ещё жив, не смотря на повальное обновление пользователями до восьмой версии. И как только (а процент использования альтернативных браузеров всё растёт) эта доходяга наконец умрёт, мы сможем использовать такие замечательные вещи как:
Подробнее »

, ,

Как Internet Explorer поддерживает CSS?

11.06.2008

Категория: Веб-разработка

“Никак”, – быстрый ответ. А для особо любопытных – CSS Compatibility and Internet Explorer, объёмный документ из MSDN с громадным количеством сводных таблиц о поддерке IE5.0-IE8.0 тех или иных CSS селекторов, псевдоклассов…

, ,

IETester – зоопарк браузеров для вебразработчиков!

9.06.2008

Категория: Веб-разработка ...

Вёрстка сайтов не такое уж и сложное дело… если бы не одно НО, которое называется Internet Explorer :)

Проверять как выглядит сайт под разными версиями этого “браузера” довольно сложно. Кто пользуется веб-сервисами, кто standalone версиями, а кто и просто бегает к соседу с просьбой “а ну-ка открой свой седьмой”…знакомо?

ietester

С лёгкой подачи WebWorkerDaily представляю вам IETester – бесплатная утилита, которая облегчит нам жизнь. С помощью этого браузера вы сможете просматривать сайт в IE5.5, IE6, IE7 и IE8 beta1 !!!

UPD:
Программа хороша! но ещё немного сыроватая, о чем ниже…
В процессе тестов оказалось ей нужен 7-й IE для рендеринга страницы во всех заявленных версиях. На свой страх и риск таки поставил его (хотя до этого использовал IE6+PortableIE7). Даже рад этому – всё-таки седьмая версия сейчас “основная”.
Пока что полёт нормальный, но случайным образом вылетает браузер – и самое интересное не понятно как лечить :). Практикую “вылетело-запустил заново” – и так до победы. Обычно хватает пару раз. Закономерности не заметил, но на оф.форуме пишут, что крашится при открытии IE6 в первой закладке… В принципе я доволен, а надежда на новые неглючные версии добавляет оптимизма :)

UPD2: Танцы с бубном показали, что открытие закладок в порядке убывания версий (8,7,6,5) добавляет стабильности :)
Во время недавней вёрстки интернет-магазина (а вы сами понимаете они не просты) особых нареканий не было, браузеры работали гладко. Жаль только отсутствует меню “открыть” – адрес подопытной странички приходится вставлять из буфера.
Из новенького – работают “conditional comments” для IE (хотя некоторые сомневались).

,

Facebox IE6 png transparency fix!

26.03.2008

Категория: Веб-разработка

С пылу с жару! Как я рад, что пофиксил немного “Facebox” (особенно учитывая мои слабые познания js)!!!
Суть проблемы проста – .png рамки непрозрачны в ИЕ :(
Для этого перепробовал кучу решений и остановился на Ifixpng, плагине для jQuery, который фиксит прозрачность. Качаем, подключаем скрипт и инициализируем его на страничке:

1
2
3
4

jQuery().ready(function(){
        $('a[rel*=facebox]').facebox();
        $('#facebox td').ifixpng();   < ------
});

Ура, уголки стали прозрачными! Но у нас появилась новая проблема – ifixpng не поддерживает CSS свойство “background-repeat”, из-за чего некорректно ображаются рамки. Так что напильничком подрихтовываем стили facebox’а (facebox.css): 

1
2
3
4
5

#facebox .b {
  background: #555;
  opacity: .70;
  filter: alpha(opacity=70); /* for IE6 support */
}

Теперь нам совсем не нужен файл "b.png" и с моего полупинка фейсбокс работает как и задумывал автор (которому, кстати, огромный респект)! Удачи!

, ,

Флеш против IE. Побеждает SWFObject!

24.01.2008

Категория: Веб-разработка

После того, как Microsoft объявила (опять же), что они изменили способ обработки плагинов в Internet Explorer у веб-разработчиков добавилось проблем. Заключается она в том, что при вставке applet, object, или embed в HTML документ плагин не допустит взаимодействия с пользователем до тех пор, пока пользователь не нажмёт на него :(.

В случае с флеш плагином, это означает, что ваш ролик не будет проигрываться до тех пор, пока пользователь его не активизирует, кликнув на нём. К счастью, Micosoft предлагает довольно простой способ обойти это проблему – вставлять флеш, используя Javascript.

Итак…

SWFObject это небольшой Javascript файл, используемый для максимально лёгкой и валидной вставки флеш. Он помогает обойти дурацкую “защиту” в IE, работает во всех основных браузерах, дружит с поисковиками, вобщем мастхэв! Взгляните на демо-страничку скрипта.

В использовании предельно прост – подключаем файл swfobject.js и добавляем в код странички примерно такое:
Подробнее »

, , ,

PNG-прозрачность в IE 5.5-6-7

27.12.2007

Категория: Веб-разработка

png-menu.jpg
Ковырялся недавно с PNG в менюшке и пришлось перепробовать несколько решений. Приведу те, которые понравились.

, , ,