Статьи

Руководство для начинающих по регионам CSS

Январь 23, 2019

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

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

Прежде всего, быстрый взгляд на поддержку браузера и включение регионов. Полный список поддерживаемых браузеров см. В таблице поддержки Adobe . В Safari iOS7 Регионы автоматически включаются, и в настоящее время они не поддерживаются в Firefox.

В Chrome

  1. Откройте новую вкладку
  2. Введите chrome: // флаги в адресной строке
  3. Нажмите CTRL + F, чтобы открыть окно поиска, введите «Экспериментальные функции WebKit» и нажмите Enter
  4. Нажмите Включить> Перезапустить сейчас (внизу страницы)

Чтобы узнать, на что способны регионы, попробуйте страницу «Наследие человека» Кристиана Кантрелла , используя клавиши со стрелками влево / вправо для прокрутки страниц и клавишу ESC, чтобы выделить различные контейнеры. Это отличный пример, поскольку он демонстрирует мощь регионов, и если вы просматриваете и Firefox, вы сразу заметите разницу.

Быстрый контрольный список браузера:

  • IE10 + работает, но требует, чтобы контент приходил из iframe
  • Firefox пока не работает вообще
  • Safari 6.1 работает с префиксом -webkit-
  • Chrome работает, используя инструкции выше
  • Opera будет работать, если вы используете версию на основе webkit с префиксом -webkit

Для немного менее впечатляющего примера, но с изображениями, взгляните на Adobe Road Trip . Вы также можете ознакомиться с рабочим проектом редактора W3, чтобы получить самые последние и самые последние сведения.

В чем смысл?

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

Расширения, которые были предложены для регионов, можно разделить на четыре категории:

  • Потоковый контент — контент, который течет из одной области в другую
  • Контейнеры произвольной формы — текст в непрямоугольных областях
  • Исключения произвольной формы — обтекание текста для фигур
  • Стиль региона — стиль содержимого, зависящий от того, в какую область он попадает

Как работают регионы?

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

Использование Regions позволяет вам передавать текст через различные области страницы в контейнеры, используя CSS-свойства flow-intoflow-from Обратите внимание, что вам рекомендуется хранить элементы семантического содержимого отдельно от презентационных, в которых они появляются. После добавления flow-intoflow-from

Определение областей таким образом не влияет на базовое содержимое элементов DOM и потоки содержимого через регионы логически, поэтому вы не можете перемещать регионы по областям, они должны быть последовательными, то есть: область № 1, область № 2 и т. Д. Однако области могут быть разбросаны и прерваны областями потока других, но по большей части необходимо изменить их расположение в дереве DOM, чтобы изменить порядок потока.

Регионы работают с реализацией двух простых концепций: блока контента, в который он может перетекать, и блока, в который он перетекает, как показано в следующей структуре DOM. 

 <div class="content">Lorem ipsum etc... your content goes here</div>
<div class="myregion" id="region1"></div>
<div class="myregion" id="region2"></div>
<div class="myregion" id="region3"></div>

Затем CSS ниже превращает myregion это также место, где вы управляете ограничениями float и width для того, чтобы содержимое lorem ipsum могло перетекать в три столбца. 

 .content {
  flow-into: yourcontent;
  -webkit-flow-into: yourcontent;
}

.myregion {
  flow-from: yourcontent;
  -webkit-flow-from: yourcontent;

  float: left;
  width: 100px;
}

В этом примере yourcontent Вы можете использовать больше регионов по многим причинам, таким как:

  • Больше столбцов
  • позиционирование
  • Расположение жидкостей
  • Большие регионы под колоннами

Конечно, вы также можете добавить элементы стиля в CSS, чтобы вы могли определять внешний вид каждой области. Вы также можете использовать исключения и формы, чтобы изменить способ отображения текста.

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

При оформлении контейнеров используйте следующий CSS, изменив цвет в соответствии с требованиями: 

 p { color: gray: } @region-style #region_1 { p { color: #0C3D5F; } }

регионы css
(Источник: http://www.w3.org/TR/2011/WD-css3-regions-20110609/#region-styling )

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

Хотя это не является исчерпывающим введением для любой части воображения, оно должно твердо поставить вас на путь экспериментов. Вы также можете попробовать использовать Adobe Edgeflow , который поддерживает CSS-области и напрямую подключается к Photoshop CC.

Зачем использовать регионы?

Регионы идеально подходят для издателей, таких как журналы, новостные сайты, онлайн-статьи или даже электронные книги с нетерпением жду. Они также полезны для адаптивных макетов, поскольку содержимое перетекает по мере изменения ориентации устройства и так далее.

С Book.js , библиотекой JavaScript, которая в настоящее время является экспериментальной, вы можете даже сделать веб-страницы похожими на страницы книги, поскольку она сама использует регионы.

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

Так что начинайте экспериментировать, чтобы увидеть, что вы можете создать с помощью CSS Regions.

34
Share: