css-html.org

Как нам известно Internet Explorer версий 6 и 7 имеет не полную поддержку значения display: inline-block;. Эти версии Интернет Эксплорера нормально рендерят inline-block-чные элементы, только если по дефолту эти элементы имею значение inline (это такие элементы как a, em, span, strong и т.д.).

А между прочим это значение может стать полезным при реализации горизонтальных менюшек и, например, пагинации.

А как же заставить блочные (и прочие отличные от inline) элементы рендериться как inline-block? Для этого необходимо нужному элементу присвоить display: inline; zoom: 1;. С помощью zoom: 1; мы присваиваем элементу hasLayout.

Таким образом элементы с display: inline; zoom: 1; в IE 6 и 7 будут отоборажаться как inline-block. Конечно же не забываем обрамлять условными комментариями код написаный исключительно для IE.

Этим решением со мной поделился добрый человек Сергей Чикуёнок, за что ему большое спасибо.

Ещё немного материала по теме.

UPD: оказывается в FF2 тоже не всё чисто с display: inline-block;. Вот ещё одна заметка о кроссбраузерном использовании inline-block. Хотя по статистике LiveInternet доля FF2 в рунете составляет всего 2,2%, но всё равно, думаю, будет не лишним позаботиться о том, чтоб и в этом браузере всё отображалось нормально.

Для корректного отображения inline-block в FF2 нужно элементу прописать следующие стили:

display: -moz-inline-stack;
display: inline-block;

UPD 2: Но не всё так просто при использовании -moz-inline-stack. Есть несколько подводных камней, и о них вы можете прочитать на блоге CSS Guru.

Добрый человек shaggysmile опубликовал замечательную статью на Хабре о том как сделать, чтобы блок перекрывал флеш. Обязательно взять на заметку.

Хозяйке на заметку

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

• Atelier – очень нравится.
• SolarHeads – нравится.
• Студия 908 – вошли в "TOP-100 ведущих студий 2008".
• Дизайн-бюро «make» – тоже вошли в рейтинг TOP-100.

Если знаете еще, то пишите. По мере нахождения хороших студий буду обновлять список.

Заметка об одном полезном сайте…

Site Guard — сервис, который просматривает ваш сайт на наличие зловредных джаваскриптов.

Работает сервис довольно просто: вы просто добавляете сайт. При добавлении сервис просматривает наличие джаваскриптов и iframe‘ов на вашем сайте и, если какие-то из них ему не нравятся, то он спрашивает у вас, вирус это или нет. Если в момент добавления на вашем сайте были какие-то левые скрипты или iframe‘ы, то вы их удаляете. Таким образом, после добавления в базе сервиса сохраняется ваш сайт со всеми скриптами (заведомо известно, что скрипты не зловредные). После этого робот с определенной периодичностью ходит на ваш сайт и поглядывает, не добавились ли новые скрипты. Если добавились, то вам на мыло (если хотите в асю или на мобильный) приходит уведомление, что мол на сайте появился новый скрипт неизвестного происхождения. Вообще всё довольно просто и банально.

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

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

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

Небольшая подборка сайтов для вдохновения… просто чтобы было куда заглянуть во время творческого упадка…

Читать полностью »

Всем привет, пишу свой первый пост за последние пару месяцев (совсем обленился).

Как многим наверно известно, Opera Software проводит тур по университетам разных стран. В числе этих стран оказалась и Украина. Мы с моим другом (по совместительству коллегой) решили посетить семинар в Донецке (сами мы из Запорожья), который проходил 27 ноября в Донецком национальном политехническом университете.

Итак, к сути. Семинар проводили трое сотрудников Оперы: Навьёт Повера (Navjot Pawera — продукт-менеджер, отдел потребительской продукции), Ульяна Куменова (менеджер отдела распространения) и Илья Шпаньков (менеджер по развитию).

Выступал в основном Навьёт, он вёл семинар на английском, а Илья переводил. Рассказывал довольно много: об их браузере, а стандартах, о различных веб-технологиях. В процессе семинара Навьёт задавал вопросы аудитории на подобии: “Кто-нибудь знает о веб-стандартах?” или “Есть ли среди вас люди, которые занимаются веб-разработкой?”. В общем, выяснилось, что из приблизительно ста человек, находившихся в аудитории, людей хоть как-то связанных с веб-разработкой было 15-20. Остальные, по всей видимости, были просто студенты, которых привлек приезд иностранных гостей .

Читать полностью »

На сайте Временно.нет увидел статью о различных помощниках веб-разработчика. В ней автор сделал краткий обзор, в который непременно вошли FireBug и Web Developer Tools для Firefox’а, и DragonFly для Opera. А вот о таких инструментах как IE Developer Toolbar, DebugBar для Internet Explorer’а и WebInspector для Safari я не слыхал.

В общем, если вы не знакомы с каким-либо из этих инструментов, то обязательно ознакомьтесь.

via css fix для различных браузеров

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

Читать полностью »

via www.quirksmode.org

Лично я из существующих значений свойства display использую только некоторые. Чаще всего это: block, inline, none и иногда table-cell. Но это далеко не полный список значений, которые представлены в спецификации CSS 2.1.

В общем, для людей, которым интересно какие ещё существуют значения этого свойства, хочу дать ссылку на довольно понятный обзор этих свойств. В приведенной ссылке вы найдете таблицу совместимости этих значений с различными браузерами, описания значений, демонстрация и изображения того, как они должны отображаться в соответствии со спецификацией. В завершение, в самом низу страницы, вы найдёте маленькое live-demo, в котором сможете лично посмотреть как, меняется расположение элементов при изменении значений свойства display.

Читая перевод статьи о свойстве hasLayout в браузерах IE, в комментариях увидел ссылку на довольно интересный проект. Автор проекта представляет вашему вниманию готовую JavaScript библиотеку, исправляющую многие баги Internet Explorer’а.

Читать полностью »