—»     —»   Обзор техник для скрытия содержимого за пределы экрана
  Раздел: Подсказки   Комментариев: 2  

Обзор техник для скрытия содержимого за пределы экрана



Обзор техник для скрытия содержимого за пределы экрана

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

Статья на Adaptive Themes охватывает число техник для скрытия содержимого, которые рассматривались как дополнение для Drupal 7 (но они также доступны для любых проектов).

Предлагаем вам подборку техник и объяснения их «тёмной стороны»:

Text Indent

.element-invisible {
  text-indent: -9999em;
  outline: 0;
}

К сожалению, данная техника не работает для языков с направление с права на лево.

Position Absolute и Collapsed

.element-invisible {
  height: 0;
  overflow: hidden;
  position: absolute;
}

В данном случае, Voice Over от Apple не прочитает содержимое внутри элемента, у которого параметр высоты выставлен на 0.

Position Absolute и Offscreen

.element-invisible {
  position: absolute;
  top: -999999em;
  left: auto;
  width: 1px;
  height: 1px;
  overflow:hidden;
}

В данном случае, если у вас есть содержимое, на котором нужно сосредоточить внимание, расположенных внутри элемента, то страница будет прокручена к тому элементу.

Clip Method

.element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

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

В статье описано то, что за время работы на компанию Yahoo!, их сотрудник использовал методы с Position Absolute и Offscreen. Но порой хотелось сфокусировать внимание на содержимом с заданным значением offscreen. Тогда пришлось перекинуться на технику Clip, но это раскрыло некоторую разницу между браузерами.

Всё будет отлично работать в IE и Firefox. Тем не менее, в браузера семейства WebKit (Chrome и Safari) и Opera существует интересный факт, что элемент становится на край экрана. Если элемент достаточно велик (когда он не обрезан) для того, чтобы вызвать горизонтальный скроллинг, он вызовет скроллинг, даже если его обрезать.

Это вроде как не соответствует правилам применения CSS 2.1. В правилах говорится:

«Содержимое, которое было обрезано, не будет вызывать переполнения».

Тем не менее, вызывая скроллинг в WebKit и Opera, он, так или иначе, вызывает переполнение. Итак, как же этого избежать?

Positioned, Clipped и почти Collapsed

Мы соединим несколько техник в одну:

.element-invisible {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

Применяя абсолютное позиционирование, мы «выдираем» элемент из контента, так что он просто не может влиять на разметку. Элемент будет виден для Voice Over, если задать ему параметр высоты в 1 пиксель. Обрезка убирает любое видимое присутствие элемента со страницы.

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

Мы лишь только начали использовать эту технику и проводить тестирования, поэтому она может быть и не совсем превосходной.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Mysterious Master   Прочитано (раз): 7221   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 18 апреля 2011 @ 03:08
Написал: epress — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Что то не понял, принцип реализации, в смысле покажите демо)
Комментарий #2: 18 апреля 2011 @ 11:16
Написал: Mysterious Master — группа: Администраторы  
На сайте с: 11.07.2009   |   Публикаций: 1491   |   Комментариев: 177
ICQ: --- не указано ---
epress, какое ж тут демо ... ? Делаете чистую страницу HTML, прописываете ей один из вышеуказанных стилей, делаете див с классом element-invisible и смотрите в браузере результат. Все проще простого ...
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930