OpenStreetBugs — лёгкий способ сообщить об ошибке в OpenStreetMap

OpenStreetBugs — лёгкий способ сообщить об ошибке в OpenStreetMap

Вы, конечно, знаете о свободной карте OpenStreetMap. Это настоящая народная карта, создаваемая такими же людьми как и вы! Это такой же opensource-проект как Linux и как Википедия. Конечно же, как и в других картах, в OpenStreetMap имеются ошибки, но в отличие от тех же Яндекс.Карт, где ошибки не исправляются годами из-за сложной бюрократической процедуры (я уже не говорю о намеренных ошибках), в OpenStreetMap всё гораздо проще и лучше для всех нас...
Подробнее..

CloudMade Navigation поддерживает ограничения манёвров

CloudMade Navigation поддерживает ограничения манёвров

Не так давно CloudMade выделил несколько приоритетных направлений, среди которых оказалась и навигация. Решено было создать специальный проект Navi Studio, который объединял бы в себе несколько более мелких сервисов и позволял пользоваться ими, для создания полноценного навигационного программного обеспечения. В Navi Studio вошли: Работа закипела и уже появилось несколько приложений использующих данный проект. Но полноценной навигации без соблюдения правил ПДД не существует, а потому данному вопросу было также уделено не мало времени...
Подробнее..

Удали себя из интернет-социума — «Web 2.0 Suicide Machine»

Удали себя из интернет-социума — «Web 2.0 Suicide Machine»

Недавно наткнулся в сети на один занимательный интернет-сервис, именующийся Web 2.0 Suicide machine . Предназначен он для того, чтобы позволить людям, обремененным «социальной жизнью в интернете», в пару кликов удалить свои аккаунты на Facebook (в данный момент сервис блокирован администрацией по IP), Twitter, Linkedin и Myspace. В общем-то судя по количеству положительных отзывов и «успешных очищений» — пипл хавает зависимые от социальных сетей успешно пользуются сервисом и довольны...
Подробнее..




Расставляем точки над прижатым футером: возвращаясь к истокам

Веб разработка - CSS

расставляем точки над прижатым футером: возвращаясь к истокам

Задача:


История вопроса: всё началось с этого коммента к этому топику, за ним последовало познавательное обсуждение, продолжившееся в личной переписке.

Начнем с примера №1 (смотреть в браузерах, понимающих CSS2.1 — IE8, Опере 7.5+, FF1+, любом Webkit-based и т.п.).


Классическая структура с тремя блоками. Всё валидно. Основной контент идет раньше других блоков в коде — частое требование к современной верстке ради доступности (скринридеры и т.п.), SEO и кучи других резонов. Ни грамма JS. Никаких отрицательных отступов и фиксированной высоты — высота «шапки» и «подвала» определяется их содержимым, а основной контент занимает все оставшееся место (если хватает).

Семантично? На мой взгляд, вполне. А визуально — да, это самая что ни на есть CSS-таблица, специально предназначенная (опять же, на мой взгляд) для случаев, когда положения блоков зависят друг от друга и от контейнера. За «магическую телепортацию» блоков к краям окна отвечают два значения свойства display — table-header-group и table-footer-group. Я тоже практически не слыхал о них, пока коллега Fragster не показал мне чудесный пример… из которого со временем и вырос этот топик :)

Как видим, это поддерживается давно и прочно. Вот если б не IE7 и ниже, не понимающие «экзотических» значений display… Оказывается, поведение, задаваемое этими свойствами, доступно и этим «динозаврам»! Это демонстрирует пример №2.

Для «правильных» браузеров в нем ничего не изменилось по сравнению с предыдущим. Лишь комментарии (в head и между блоками), не влияющие на семантику кода (поисковики, скринридеры и т.д. их проигнорируют). А вот в старых IE произошла «изящная деградация» к… старой доброй табличной разметке! И при этом порядок блоков в коде остался тем же, семантичным.  упс… я этого не говорил :)

Надо признаться, код, который в предыдущем примере получает IE7-, невалиден: по стандарту thead и tfoot (чье поведение имитируют table-header-group и table-footer-group) должны идти перед элементом tbody, а не после. К счастью, для «всеядного» IEшного парсера это неважно. Но иногда порядок табличных (с точки зрения визуальному отображения) элементов бывает существенным для браузерного рендерера. Так, если в примере №1 поменять местами .header и .footer, ломается отображение в Опере 9.2x и ниже: .footer выводится непосредственно под .header-ом. В современных версиях Оперы (9.5 и выше) отображение уже не зависит от порядка блоков (как и в других браузерах), но, поскольку Опера 9.2х кое-где еще занимает существенный процент, приходится учитывать эту ее особенность.

Внимательные читатели могли заметить, что в примере №2 используется expression. Единственная его роль — растянуть среднюю строку на всю свободную высоту таблицы (обход известного глюка IE7 - в стандартном режиме, игнорирующего заданную высоту строк «резиновой» таблицы и всегда растягивающего их пропорционально). Поэтому даже при отключенном JS .footer останется прижатым — лишь основной контент немного «уползет» вниз от .header-а.

Принципиально обойтись без expression возможно. Например, так, как в примере №3 (там изменен порядок блоков, что вызовет упомянутую проблему в старых Операх, но для некоторых аудиторий — напр., американской — это не критично). «Экстремалы» прогресса могут вообще перевести старые IE в Quirks mode (который там умеет нормально распределять высоту в резиновых таблицах — парадокс!), а различия в боксовой модели нивелировать CSS3-свойством box-sizing:border-box, поддерживаемым всеми современными браузерами (к тому же эта боксовая модель для многих удобнее). Лично я считаю один некритичный expression «допустимым злом». Зато в этом способе  возникает меньше других проблем, всплывших по ходу обсуждения исходного топика — конфликтов z-index-ов,  и т.п. Ну а чем в итоге пользоваться — решать, конечно же, вам!

 


Читайте:


Добавить комментарий


Защитный код
Обновить

News image

Adobe покажет Flash с поддержкой 3D осенью

Компания Adobe представит версию своего плагина для отображения мультимедиа в браузерах, Flash, с поддержкой трехмерной графики этой осенью. В компа...

News image

Командная строка на службе сервисов Google

Не всем нравятся распрекрасные интерфейсы с большими кнопками и специальными элементами управления для ввода текста или загрузки файлов. Иногда прощ...

News image

Как бы шифрование

Одной из функций новых телефонных аппаратов iPhone 3GS является аппаратное шифрование данных, что вроде бы должно создавать у потребителей впечатлен...

News image

Выход Adobe Reader для Android

Adobe Systems сегодня объявила о начале официального распространения бесплатной версии Adobe Reader для операционной системы Android. Напоминаю, что...

News image

Adobe представляет пакет LiveCycle Enterprise Suite 2

Компания Adobe Systems Incorporated представила пакет Adobe LiveCycle Enterprise Suite 2 (ES2) – новую версию программного обеспечения, с помощью ко...

Топ технологий:

News image

Оздана новая система беспроводной связи - она в 10

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

News image

Как взломали Twitter

В Интернетах, наряду с iPad, сканерами в аэропортах и войне между Google и Apple, уже второй день подряд активно обсуждается тема взлома и...