Избегаем распространенных ошибок в HTML5 разметке. Не каждое изображение
В этой статье мы поговорим с вами о том, как создать каркас страницы, а также о том, в каких блоках располагать те или иные элементы.
Блочная верстка стала довольно популярной и используется практически везде. Раньше, в HTML 4, блочные конструкции создавались с помощью блоков div. Если открыть любой сайт 2012-2014 года, а затем открыть его исходный код, то вы увидите длинный и сложный код нагроможденный блоками .
Такая конструкция не была плохой для пользователя, так как на отображение это никак не влияло. Проблемы были у разработчиков и у технической поддержки сайта.
Основная проблема — большое количество блоков , их могло быть и до 50,100 и даже 200. Такое нагромождение могло вызвать путаницу в коде — многие разработчики очень часто путались в своем коде. Это делало разработку медленной.
Изменил эту проблему, добавив несколько семантических блоков. Каждый блок был настроен под определенную информацию, как "nav" для навигационной панели, или "footer" для подвала.
Кроме этого, новая версия HTML уделила большое внимание семантическому ядру сайта. Поисковики имели лучшее понимание информации, которая расположена в определенном блоке.
Семантические элементы. HTML 5Перед тем как говорить о разметке веб-страницы, давайте рассмотрим основные теги-контейнеры:
Существует ещё 7 HTML5 тегов, которые можно использовать для создания различных блоков. Они используются реже, поэтому мы не будем их рассматривать.
Разметка страницыКогда мы познакомились с основными тегами-контейнерами, давайте приступим к созданию простого HTML каркаса. Откройте ваш HTML документ и запишите туда все стандартные теги, по типу , , и .
Создание нашего макета будет проходить в 3 этапа:
Для начала необходимо создать шапку для нашей страницы.
Создаем тег , а в нем располагаем заголовок(будет использоваться вместо логотипа) и список с пунктами меню.
Создадим главный блок страницы. Это будет тег-контейнер , в котором будет располагаться список преимуществ товара и кнопка перелистывания.
Далее приступаем к созданию основных блоков. Для них будем использовать теги . Первый блок обернем в тег , так как в нем будет располагаться публикация с информацией о продукте.
Второй блок будет содержать в себе прайс-лист и кнопку. Внутри создаем 3 блока , в которых создаем списки с информацией. Ниже располагаем кнопку.
Теперь расположим подвал страницы, в котором будет находиться контактная информация и кнопки социальных сетей.
Создаем тег и записываем основную контактную информацию. Кроме контактов, нам необходимо разместить информацию о копирайте.
Заключение
У нас получилась простая HTML страница из нескольких блоков, которая не имеет особой привлекательности, пока что. В следующих статьях мы сделаем стилизацию всех этих блоков.
Если хотите, можете самостоятельно . Можете добавить туда какие-либо блоки или заменить информацию, по вашему усмотрению. Главное, не меняйте общую структуру документа, он нам ещё понадобится.
А если у вас возникли трудности с размещением элементов или записью HTML кода, то можете скачать наши исходники. Удачи в изучении!
Доброго времени суток, верные читатели и подписчики. Текущая публикация посвящается подробному разбору темы: «Блочная адаптивная разметка css-страницы». В этой статье я расскажу вам, что подразумевает под собой блочная верстка, в чем ее преимущества и какие инструменты для этого используются.
Помимо этого, я поделюсь знаниями о нескольких простых подходах реализации адаптивности и подкреплю все описания конкретными примерами. Ну что ж, давайте приступать к обучению!
Кнуты и пряничкиБлочная верстка веб-страниц – это метод разметки страниц блоками (слоями), которые создаются при помощи специального тега < div> .
Изначально разработчики использовали табличную верстку, однако она отошла на второй план после появления описываемого вида. Почему же так произошло? А все потому, что разметка страниц слоями обладает достаточно большим списком преимуществ и всего лишь парочкой недостатков. Давайте подробнее разберем каждый из них.
Вкусные пряникиУменьшение объема кода. При использовании таблиц в качестве структурированного размещения контента и элементов управления сайта в html-документе располагалось достаточно много вложенных тегов, в которых путались даже разработчики со стажем.
При использовании блоков такая проблема устраняется. В коде располагается небольшое количество div-ов, каждому из которых устанавливаются стилевые правила через прописанный класс. Например:
…
…
…
Гибкое управление объектами. За счет того, что за каждый слой отвечает определенный класс, появилась возможность быстро и без вреда для других блоков переопределять внешний вид выбранного, перемещать его по веб-странице или изменять вид представления. К тому же блочная верстка позволяет решать сложные задачи с нестандартным размещением слоев.
Весомое преимущество для SEO. В табличных представлениях все содержимое веб-сервиса распределялось по ячейкам, что сильно усложняло работу поисковых роботов. С использованием же блочной верстки данная проблема также решилась.
Весь контент сайта разбивается на блоки по смыслу, которые подписаны при помощи классов. Поэтому поисковые программы легко отыскивают нужную информацию и проводят индексацию. А это значит, что сайт поднимается вверх при выдаче результатов на поисковые запросы.
Возможность создавать адаптивный дизайн веб-страниц. Для тех, кто еще не знает, что такое адаптивный дизайн, я советую прочитать соответствующие статьи на моем блоге о данной технологии. А пока скажу только, что адаптивность позволяет сервисам выглядеть одинаково и привлекательно на экранах с любым разрешением, будь то десктоп или смартфон.
Именно благодаря верстке слоями такая возможность стала доступной. Конечно она требует дополнительных знаний, но это стоит того.
Камни преткновенияВозникновение сложностей при освоении. Если сравнивать с табличной версткой, то она, безусловно, проще. Достаточно знать несколько базовых тегов, с помощью которых создаются таблицы, и просто заполнить созданные ячейки информацией.
В блочной разметке все может показаться несколько сложнее. Особенно для новичка. Потому что вам необходимо хорошо разбираться не только в html-коде, а еще и знать большинство свойств css. Однако трудности возникнут только вначале при изучении технологий, а вот после жизнь покажется сказкой.
Разборки с кроссбраузерностью. Так как данный подход появился несколько позже табличного, не все ситуации с его функционированием стандартизированы. И поэтому иногда в разных браузерах отображение вашего сайта может выглядеть несколько иначе. Для исправления недочетов в некоторых случаях придется поизвращаться.
Простые техники создания адаптивностиНу а теперь перейдем непосредственно к разбору нескольких простых механизмов по созданию адаптивности сайта. Для этого сверстаем простой макет страницы.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
Bootstrap Example
body{
padding:0;
margin:0;
background: url("http://www.bankoboev.ru/fons/ODQ1MA==/Bankoboev.Ru_avtomobili_na_nochnyh_dorogah.jpg");
font-size: 19px;
color: #fff;
text-align: center;
}
.header{
background: rgba(80, 80, 80, .8);
padding: 24px;
border-bottom: 3px solid #B5B5B5;
}
.menu{
background: rgba(80, 80, 80, .5);
float: left;
font-size:33px;
padding: 16px;
text-align: left;
line-height: 1.5;
height: 331px;
}
li{ list-style-type: none;}
.container{
text-decoration: underline;
padding: 29px;
background: rgba(0, 1, 0, .4);
}
img{
height: 220px;
width: 350px;
outline: 6px solid #CFCFCF;
}
.photo{
display: inline-block;
}
.footer{
background: rgba(0, 1, 0, .8);
padding: 11px;}
Сайт СуперАвто
Все права защищены!
|
Bootstrap Example body{ padding:0; margin:0; background: url("http://www.bankoboev.ru/fons/ODQ1MA==/Bankoboev.Ru_avtomobili_na_nochnyh_dorogah.jpg"); font-size: 19px; color: #fff; text-align: center; } .header{ background: rgba(80, 80, 80, .8); padding: 24px; border-bottom: 3px solid #B5B5B5; } .menu{ background: rgba(80, 80, 80, .5); float: left; font-size:33px; padding: 16px; text-align: left; line-height: 1.5; height: 331px; } li{ list-style-type: none;} .container{ text-decoration: underline; padding: 29px; background: rgba(0, 1, 0, .4); } img{ height: 220px; width: 350px; outline: 6px solid #CFCFCF; } .photo{ display: inline-block; } .footer{ background: rgba(0, 1, 0, .8); padding: 11px;} Сайт СуперАвто
Здесь вы найдете изображения и видео, связанные с автомобильной тематикой
Все права защищены! Как видите, внешний вид созданного интернет-ресурса корректно отображается до тех пор, пока размер экрана не станет слишком маленьким. Поэтому дополним свойства css некоторыми параметрами.
Для начала к блокам с классами . header , . container и . footer добавьте свойство min-width: 355px . Теперь ваша страница с контентом будет уменьшаться только до указанного размера, а после появится скролл.
В данном примере мне не нужно было реализовывать адаптивность для картинок. Однако автоматического подгона размера изображений можно достичь, прописав в стилях следующие строки.
Создание разметки можно смело относить к искусству: здесь нет точных правил и единого ответа на какой-либо вопрос, зато практически всегда есть несколько вариантов решения определенной проблемы.
Безусловно, существуют общепризнанные методы разметки, а также т. н. best practices - оптимальные способы достижения цели, которые были определены практическим путем. Но в целом, чтобы добиться успехов в изучении этого ремесла, важна практика, практика и еще раз практика.
В этом уроке мы расскажем об основных правилах, которые помогают в построении грамотной разметки. Придерживаться этих правил или нет - ваш выбор, однако рекомендуем помнить о них, когда вы будете работать с реальными проектами. Кроме этого мы дадим несколько рекомендаций по ведению кода и работе с графикой.
Mobile FirstВ наше время уже сложно представить мобильный девайс, который бы не предоставлял возможности подключиться к Интернету. Многие люди выходят в Сеть со своих смартфонов и планшетов чаще, чем с настольных компьютеров и ноутбуков. Это заставило веб-дизайнеров и разработчиков серьезно задуматься над изменением подхода к созданию веб-продуктов.
К примеру, раньше разработка сайта начиналась с настольной версии, которая затем адаптировалась под мобильные устройства. Стратегия Mobile First призывает поступать наоборот: не масштабировать десктопный вариант сайта, пытаясь уместить его в маленький экран, а проектировать дизайн с учетом ограниченного пространства, постепенно расширяя базовую версию (с набором только самых важных элементов) до полноценной.
Mobile First подразумевает совершенно другое мышление в плане размещения элементов на страницах и создания структуры. Главными пунктами здесь являются компактность и информативность, отсутствие отвлекающих факторов и второстепенных элементов.
КаркасПрежде чем приступать к верстке страниц сайта, желательно иметь примерные наброски их структуры: количество колонок, расположение основного контента, содержимое хедера и футера и т. д. Это можно сделать как на бумаге, так и в графическом редакторе. Определившись с тем, где и как будут расположены элементы веб-страниц, вы сможете более быстро создать HTML-каркас, который затем будет стилизоваться через CSS.
Структурные схемы страниц на английском называются wireframes. При разработке серьезных сайтов созданию схематических страниц уделяется большое внимание, поскольку они являются отображением результата работ по проектированию. Пример такого каркаса показан на рисунке ниже:
ВерсткаНа основе макетов можно приступать к написанию HTML и CSS-кода. Имея представление о том, какие элементы будут на веб-странице, можно подобрать для них соответствующие теги.
С помощью CSS добавляется стилевое оформление для элементов. Есть есть необходимость в дополнительных «зацепках» для стилей CSS, к тегам добавляются классы. Давайте описательные и лаконичные имена классам - это хороший тон.
В большинстве случаев, создавая HTML-каркас страницы, необходимо двигаться сверху вниз - от шапки к футеру. Все элементы будут отображаться последовательно друг за другом, если только вы не повлияете на это через CSS.
Позиционирование и слоиС помощью каскадных таблиц стилей можно исключать элементы страницы из общего потока, фиксировать их на экране, перемещать на другой конец страницы, накладывать одни элементы на другие, словно слои и т. д. Для этого используется свойство position , которое мы изучим далее в книге.
Кстати, визуально перемещать элементы можно и с помощью уже хорошо знакомых вам свойств margin и padding . При добавлении к элементу полей и/или отступов с определенной стороны образуется пустое пространство, которое, по сути, смещает элемент. Например, добавив с верхней стороны блочного элемента свойство margin с положительным значением, мы сместим элемент вниз, а отрицательное значение приведет к смещению элемента вверх.
Подходы к созданию макетаКак уже не раз упоминалось, до развития блочной верстки веб-страницы часто создавались таблицами (т. н. табличная верстка). Это позволяло относительно легко построить колоночный макет и расположить элементы в желаемом порядке.
С появлением свойства float стало возможным создавать макеты без таблиц. И хотя этот подход еще популярен, он уже не является самым современным способом создания разметки.
Спецификация CSS Flexible Box Layout Module подняла верстку на новый уровень и очень упрощает разработку макетов. Среди преимуществ Flexbox выделяется возможность сделать любой блок «резиновым», гибкое поведение элементов, инструмент для горизонтального и вертикального выравнивания, автоматическое преобразование элементов в столбцы и строки и многое другое. И если еще в 2014 году Flexbox еще не был столь популярным, то в 2017, учитывая вышедший Bootstrap 4, который основан именно на flex-модели, можно смело считать, что ближайшее будущее будет за Flexbox.
И две папки css и image.
Если вы все делали правильно, то шаблон устанавливается на Joomla 3 без проблем. Далее мы будем работать над каскадными таблицами стилей , которые отвечают за оформление страниц сайта.
Момент 1. При создании таблиц я буду использовать язык CSS2 . В отличии от CSS3, он проще для понимания. Это важно, т.к. большая часть аудитории моего сайта – новички в веб-программировании. Также есть еще один минус CSS3 - этот язык в настоящий момент не поддерживается всеми браузерами. Для тех же, кто мало знаком с CSS2, для лучшего понимания, в работе над таблицами, предлагаю использовать справочник «HTML, CSS, PHP» .
Момент 2. Я всегда создаю сайты и отрабатываю шаблоны только на локальном сервере, установленном на моем компьютере. На хостинг заливаю уже готовый, полноценно функционирующий сайт с начальным контентом.
К чему я это говорю, оказывается, есть такие умельцы, которые размещают на хостинге сырой сайт с искореженным шаблоном (материалы не то, чтобы читать нельзя, на них смотреть страшно), а потом пытаются удаленно навести порядок на сайте. В этом случае процесс будет сложным и долгим, и вероятность тотальных ошибок очень велика.
Момент 3. Я никогда не редактирую код шаблона из админпанели Joomla , а использую только программу Macromedia Dreamweaver . Открываю нужный мне файл, редактирую его, сохраняю (но не закрываю файл) и смотрю сразу же, какие изменения произошли на сайте. Если они мне не нравятся – отменяю, произведенные ранее действия.
ВНИМАНИЕ: Откатится назад в админке Joomla при редактировании кода невозможно!
С программой Macromedia Dreamweaver очень удобно работать – она подсвечивает код, помогает писать его очень быстро, выделяет ошибки, позволяет произвести откат. Всю документацию по Macromedia Dreamweaver и саму программу вы можете найти на сайте.
Ну вроде все рассказала и можно приступать к работе. Первым делом, необходимо правильно расставить все блоки DIV на странице. Сейчас они пока стоят друг за другом (смотрите скришот с предыдущего урока).
Чтобы в процессе работы хорошо видеть, как встают блоки, в менеджере модулей CMS Joomla я создала модуль поиска по сайту и поставила его в позицию «user1», модуль горизонтального меню - в позицию «user2», модуль навигации по сайту – в позицию «user3», три модуля с произвольным HTML кодом – в позиции «left», «right», «footer».
Изначально я решила блок «header» сделать универсальным и предусмотрела в нем позицию для вывода модулей «header». В этой позиции можно вывести какой-нибудь ротатор изображений или с помощью модуля с произвольным HTML кодом просто вывести изображение, любой высоты, при этом ширина должна быть всегда 950рх (ширина страницы). Это изображение можно сделать кликабельным, а также с легкостью его менять. Для начала я просто создала подобный модуль и разместила в нем картинку размером 950х250.
Используйте справочник по стилям CSS, если вам не понятны какие либо параметры.
Сначала оформляем блок «body», зададим ему пока серый цвет фона.
font:14px Arial, Helvetica, sans-serif ;
line-height:1.3;
text-align:left;
background-color:#fff;
overflow:hidden;
Бло ки "logo" и "user1" будут выводиться в контейнере «top», зададим высоту, а ширина будет занимать 100% ширины страницы, т.е. 950px.
Блоку "logo" зададим фиксированную высоту и ширину, а также синий цвет фона. Определим выравнивание по левой стороне, при этом остальные элементы будут обтекать его с других сторон.
background-color:#0099FF;
Блоку "user1" зададим фиксированную высоту, ширину, желтый цвет фона, выравнивание по левой стороне.
background-color:#CCFF00;
Блок вывода горизонтального меню «user2» будет иметь ширину 100% от ширины страницы, т.е. 950px. Высота блока будет растягиваться до высоты модуля меню.
#user2 { width: 100%;}
Блок вывода шапки сайта «header» будет иметь ширину 100% от ширины страницы. Высота блока будет растягиваться до высоты изображения, которое будет выводиться в модуле.
#header {width:100%;}
Блок «user3» будет иметь ширину 100% от ширины страницы. Высота блока будет растягиваться до высоты модуля, который будет выводиться в позиции «user3» .
background-color:#CC9900;
Оформление левой колонки блок «left»
background-color:#FF6666;
Оформление правой колонки блок «right»
background-color:#66FF33;
Теперь разберемся с контентом. Если в левой и правой колонке будут выводиться модули, то ширина компонента контент будет 550рх (950-200 -200).
Если модули будут выводиться или только в левой или только правой колонке, то ширина компонента контент будет 750рх (950-200).
Если будут отключены обе колонки, контент занимает 100% страницы, т.е. 950рх.
Блок «footer» будет иметь ширину 100% от ширины страницы. Высота блока будет растягиваться до высоты модуля, который будет выводиться в позиции «footer». Отменим обтекание блока одновременно с правого и левого края, чтобы футер не поднимался вверх.
background-color:#82b5bf;
Вот, что у меня в результате получилось. Хорошо видно, что все блоки стоят на своих местах, согласно блоковой схемы . Красоту будем наводить на следующем уроке .
P.S. Для тех у кого возникли трудности с написанием кода файлов или инсталляцией шаблона, я сделала установочный пакет TRIP , который должен быть у вас к концу этого урока.
Перевод которой специально для читателей хабра представлен ниже.
Несмотря на все поразительные возможности CSS, их недостаточно для реализации фундаментальных принципов разметки страницы. Однако, дополнительные возможности для создания более динамических страниц уже начинают появляться.
После нескольких лет обещаний, CSS3 наконец-то преуспел в стилях. Он добавил в наш арсенал целый набор новых инструментов, обеспечив нас закруглёнными углами, градиентами, прозрачностью, преобразованиями элементов, анимацией и многим другим. Что же ещё сможет порадовать наш глаз?
Следующая проблема CSS это разметка. До текущего момента мы делали её, используя плавающие блоки, относительные позиции и трюки с отрицательными отступами, и всё это было сложно реализовать, чтобы результат был похож на стандартную двух- или трехколоночную разметку.
Консорциум W3C и создатели браузеров в курсе этих проблем и работают над рядом решений. Лидером среди них является (как не удивительно) Internet Explorer. Похоже, что IE10 будет предвестником новой эры CSS разметки, которая позволит создавать отличные, динамические и привлекательные сайты, используя недосягаемые ранее возможности.
В данной статье автор рассматривает различные методы разметки, которые хотелось бы использовать на отдельных стадиях разработки, от уже внедренных до чисто теоретических. Возможно, не все из них нам удастся использовать в дальнейшем (по крайней мере не в текущей форме), но стоит взглянуть на эти методы, чтобы понять будущее CSS разметки.
Div { column-count: 3; }
Во втором способе ширина колонок фиксирована, они будут повторяться до тех пор, пока не заполнят ширину родительского элемента. В этом примере ширина колонки установлена в 140px, значит в блоке шириной 800px должно появиться пять колонок:
Div { column-width: 140px; }
По умолчанию, зазор между колонками равен 1em, но его можно сменить, используя свойство column-gap
. Также между колонками можно разместить разделительные линии с помощью column-rule
, похожий по синтаксису на свойство border. Представленный ниже код создаст пунктирную линию шириной 2px, а также установит отступ между колонками в 28px (разделитель будет располагаться посредине):
Div {
column-gap: 28px;
column-rule: 2px dotted #ccc;
}
Если хотите посмотреть результат, взгляните на пример реализации CSS колонок . Для того, чтобы увидеть три колонки, необходимо использовать Firefox, Chrome, Safari, Opera 11.1 или IE10 Platform Preview (IE10PP)
. Либо посмотрите на представленный ниже скриншот.
С колонками можно делать разные вещи. Практический пример их использования есть в Википедии, в секции примечаний , где используется column-count . В Firefox многоколоночность реализована с префиксом -moz- , в Chrome и Safari с префиксом -webkit- , в Opera 11.1 и IE10PP без префиксов.
Таблица Совершенно новым в IE10PP является система табличной разметки. Перед её использованием необходимо определиться со строками и колонками. Для колонок можно использовать значения длины, auto keyword и новую единицу измерения fr (сокращение от fraction , относительное количество). Посмотрите на этот пример:Div {
display: grid;
grid-columns: 1fr 3fr 1fr;
grid-rows: 100px auto 12em;
}
Этот код создаст таблицу из трех колонок, центральная из которых будет в три раза шире левой и правой, а также из трех строк, где верхняя будет 100px по высоте, нижняя 12em, а средняя расширится по высоте автоматически, в зависимости от длины контента.
Теперь, когда у нас есть таблица, можно в ней разместить контент. Используя элементы HTML5, можно создать, действительно, очень простую разметку страницы:
Header { grid-column: 1; grid-column-span: 3; grid-row: 1; }
nav { grid-column: 1; grid-row: 2; }
article { grid-column: 2; grid-row: 2; }
aside { grid-column: 3; grid-row: 2; }
footer { grid-column: 1; grid-column-span: 3; grid-row: 3; }
Вматриваясь в код, можно заметить, что контент на странице распределен по строкам и столбцам с помощью, соответственно, свойств grid-row
и grid-column
. Элемент article
размещен во вторую колонку второй строки - центр таблицы 3х3. Также используется свойство column-span
для элементов header
и footer
, которое растягивает их на все три колонки (подобно действует свойство row-span
, которое здесь не использовалось).
Демо разметки можно посмотреть в примере использования CSS Grid , но нужна платформа IE10. Если её нет, то просто взгляните на скриншот.
Упомянутые выше свойства полностью внедрены в IE10PP, поэтому можно с ними экспериментировать прямо сейчас. Однако, множество свойств всё ещё не реализовано.
Шаблон Другим подходом к табличному представлению является модуль Template Layout . Он использует немного иной синтаксис, где сперва необходимо присвоить позицию блокам, используя буквенный символ и свойство position :Header { position: a; }
nav { position: b; }
article { position: c; }
Как только мы присвоим позицию, можно создавать разметку, используя последовательность символов. Каждая последовательность эквивалентна строке, а каждый символ в последовательности это колонка. Например, чтобы создать таблицу из одной строки и трех колонок, можно использовать:
Div { display: "abc"; }
В данном случае отобразится три равномерно распределенных элемента в горизонтальной строке. Но можно повторять символы чтобы расширять колонки, а также использовать одинаковые символы на той же позиции в разных строках, чтобы расширять строки. В приведенном ниже примере элемент nav
перекрывает две строки, а header
и article
перекрывают два столбца (код отформатирован для наглядности):
Div {
display:
"baa"
"bcc";
}
Template Layout ещё не используется браузерами, но уже есть хороший скрипт polyfill на jQuery , который позволит поэкспериментировать, именно он использован в примере по ссылке . Результат выглядит также, как в примере с табличной разметкой, но код совсем другой.
На демо-странице используется JavaScript, поэтому должно сработать на всех современных браузерах. Табличная разметка, возможно, будет поддерживать и синтаксис шаблона, как на приведенном ниже примере:
Header { grid-cell: a; }
article { grid-cell: b; }
div {
display: grid;
grid-template: "a" "b";
}
По функционалу этот код идентичен свойствам Template Layout, но также ещё не внедрён (а может быть никогда и не будет).
Div {
float: positioned;
left: 200px; position: absolute; top: 100px; width: 250px;
}
Этот код создаст элемент 250px по ширине, расположенный слева на 200px и сверху на 100px от родительского объекта. По умолчанию, любой другой контент внутри родительского будет обтекать позиционируемый элемент со всех сторон, но это можно изменить различными значениями свойства wrap-type
, например, когда текст обтекает элемент только сверху и снизу:
Div { wrap-type: top-bottom; }
Можно комбинировать свойства позиционирования и табличной разметки, размещая элемент в таблице и позволяя контенту обтекать его со всех сторон:
Div {
float: positioned;
grid-column: 2;
grid-row: 2;
}
Если у вас имеется IE10PP, то можно . Если нет, то результат показан на скриншоте ниже, его невозможно реализовать текущими возможностями CSS.
Div { wrap-shape: circle(50%, 50%, 100px); }
Этот код создаст окружность с радиусом 100px, которая будет центрирована в родительском элементе. Можно использовать функцию polygon()
для создания любой фигуры, указывая координатные пары, разделенные пробелом, например для треугольника:
Div { wrap-shape: polygon(0,100px 100px,100px 50px,0); }
Когда уже имеется заданная фигура, внутренний контент можно сделать обтекаемым по этой фигуре, используя второе свойство wrap-shape-mode
, как здесь:
Div {
wrap-shape: circle(50%, 50%, 100px);
wrap-shape-mode: around;
}
Работу CSS Exclusions в действии можно посмотреть, скачав прототип для Mac или Windows с лаборатории Adobe . Там имеется полная документация и несколько очень классных демо-файлов, например, такой:
Content { flow: foo; }
.target1, .target2 { content: from(foo); }
Здесь контент будет браться из элемента .content
, а далее распределятся сперва по элементу .target1
и если блока не хватит для отображения контента, то он будет продолжать отображаться в .target2
. Контент не будет дублироваться в блоках, он будет начинаться в первом и продолжаться во втором (если необходимо). Чтобы лучше понять, просто взгляните на изображение ниже.
Кстати, никаких требований к целевым областям нет относительно расположения их в разметке. Они могут размещаться на противоположных сторонах страницы, если в этом есть необходимость.
Спеки по CSS областям ещё не были внедрены в браузеры, но по аналогии с Exclusions, можно использовать прототип с лаборатории Adobe и попробовать функционал самостоятельно.
Заключение Пока что неясно, какие из новых модулей разметки (из FlexBox и Колонок) будут полностью внедрены в браузеры. Что касается плавающих блоков и Exclusions, хотелось бы их скрестить из-за похожести функционала (возможно, так и будет). Табличная разметка тесно связана с разметкой шаблонами и, несомненно, можно ожидать её появление в IE10. CSS области уже внедрены в одной из ветвей WebKit, и, вероятно, появятся в WebKit-браузерах (Safari, Chrome и других) очень скоро.Таким образом, можно прогнозировать, что с некоторыми изменениями в синтаксисе, всё описанное выше будет использоваться в CSS3 в будущем. Очень хорошо, если это произойдёт, так как, в этом случае, новые методы позволят с минимальными затратами создавать очень продуманные сайты всего через несколько лет.
Теги:
- css3
- flexbox
- ie10
- html5
Загрузка...
