разные методы и их побочные эффекты
От автора: как создаются слои анимации? Ответ — will-change: transform. Или нет? Если только вы не будете изменять преобразование, не используйте will-change: transform. Используйте will-change: opacity или backface-visibility: hidden, поскольку их побочные эффекты, как правило, не вызывают столько проблем.
Общая информация
Очень упрощенный механизм рендеринга браузера выглядит следующим образом:
Загрузка и парсинг HTML, создание дерева DOM.
Процесс применения стилей, чтобы скомпоновать документ, создавая «дерево макета».
Изменение дерева макета в соответствии с инструкциями отображения, создавая «дерево отображения».
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееСоздание холста, достаточно большого, чтобы разместить весь документ.
Выполнение всех этих инструкций отображения на этом холсте.
Эта работает отлично, пока вы не будете часто вводить изменения. Например, 60 раз в секунду. Если мы хотим, чтобы элемент вращался, мы не можем повторно использовать старый холст. Мы должны запустить обновление и вернуться к шагу 2.
Не было бы лучше, если бы мы нарисовали вращающийся элемент на прозрачной пленке? Таким образом, мы могли бы сохранить холст документа и повторно использовать его, отбросив только этот крошечный фрагмент пленки. Это то, что делают «слои».
Всякий раз, когда вы используете CSS-анимацию или переходы CSS, браузер автоматически помещает анимированные элементы в слой. Он сохраняет основной холст при отображении следующего кадра и позволяет обойтись без большого количества дополнительной работы.
Вы можете сделать слои видимыми через DevTools двумя способами:
Вы можете включить «Границы слоев» на вкладке «Рендеринг» в DevTool, и в результате увидите оранжевые границы вокруг элементов, расположенных в отдельном слое.
Через вкладку «Слои» в DevTools вы можете получить интерактивное представление в реальном времени всех слоев на текущей странице.
История
Хорошо, но вот что: я бы хотел, чтобы нам не нужно было беспокоиться о том, находится ли элемент в собственном слое или нет. Это деталь реализации. В идеале браузер должен был бы знать, как должно быть, и просто делал это. К сожалению, в реальности это не так. Вы, разработчик, знаете свой код и все возможные ответвления, поэтому только вы можете сказать, какая оптимизация имеет смысл. Например: когда вы анимируете элемент кадр за кадром с помощью requestAnimationFrame(), для браузера сложно, а скорее, невозможно, знать, что элемент будет иметь новое значение для преобразования каждого кадра. Если вы не поместите анимированный элемент в отдельный слой, вы столкнетесь с проблемами производительности, потому что браузер будет обновлять весь документ для каждого кадра.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееВ прежние времена мы использовали следующий прием — устанавливали transform: translateZ(0). translateZ нужно использовать, чтобы применять графический процессор для вычисления искажения перспективы (даже если это в конечном итоге не будет искажением вообще). Если вы используете translateX или translateY, никаких искажений перспективы не требуется, и браузер будет отображать элемент в основном холсте, просто с указанными смещениями (демо).
Из-за того, что этот прием использовался для создания мерцания элемента в Chrome и Safari (это уже не так), рекомендовалось устанавливать для элементов backface-visibility: hidden — и этот совет по-прежнему приводится и по сей день.
В марте 2016 года iOS 9 получает поддержку свойства will-change, которое указывает браузеру, что определенное CSS-свойство … ну, изменится. Если вы установили для элемента will-change: transform, вы сообщаете браузеру, что свойство transform изменится в ближайшем будущем. В результате браузер может применять оптимизацию для учета этих будущих изменений. В случае преобразования это означает, что он выносит элемент в отдельный слой. Несмотря на то, что Edge не поддерживает will-change, оптимальной практикой стало считаться использовать will-change: transform, чтобы вынести элемент в отдельный слой. Архитектура Edge сильно отличается от Chrome, Firefox и Safari и позволяет выполнять эти виды анимаций без подсказки will-change.
Побочные эффекты
Что может быть не сразу очевидным, так это то, что все эти методы имеют побочный эффект, выраженный в разной степени.
backface-visbility
Как следует из названия, backface-visbility: hidden имеет побочный эффект, обратная сторона элемента скрывается. Обычно эта сторона не «обращена» к пользователю, но когда вы вращаете элементы в трехмерном пространстве, это может произойти. Если вы посмотрите эту демо-версию и нажмете кнопку “Flip boxes”, то увидите, что у элемента с backface-visibility: hidden обратная сторона скрыта.
will-change: transform
will-change: transform сообщает браузеру, что преобразование этого элемента изменится в ближайшем будущем. Для этой семантики спецификация предписывает, что параметр will-change: <something> должен иметь те же побочные эффекты, что и любое не начальное значение для свойства <something>.
Это кажется разумным, но могут возникнуть сложности при использовании position: fixed или position: absolute. Посмотрите эту демо-версию:
Если вы установите значение для transform, вы создадите так называемый новый «содержащий блок». Любые дочерние элементы с position: fixed или position: absolute теперь связаны с этим новым содержащим блоком, таким образом, как непоследовательное позиционирование розового блока в демо-версии. Это один из тех тонких побочных эффектов, которые, хотя и описаны в спецификации, на самом деле не слишком интуитивны, по моему мнению. Время от времени я спотыкаюсь об это.
transform: translateZ(0)
transform: translateZ(0) имеет те же побочные эффекты, что и change-transform: transform (он все-таки устанавливает преобразование), но также может мешать другим стилям, которые используют преобразование, поскольку эти свойства переписывают друг друга в соответствии с каскадом. Если вы посмотрите на обе предыдущие демо-версии, то увидите, что элементы, которые используют transform: translateZ(0), ведут себя не так, как ожидалось.
will-change: opacity
Если вы не обратили внимание, элемент с will-change: opacity, ведет себя в предыдущей демо-версии, как и ожидалось. Однако это не означает, что это побочный эффект. Задав will-change: opacity, мы создаем новый «стековый контекст». Это еще один термин из спецификации CSS, и, если по-простому, это означает, что он может повлиять на порядок отображения элементов. Если у вас есть перекрывающиеся элементы, это может изменить, какой элемент находится «поверх», как показано в этой демо-версии. Но даже если это произойдет, z-index поможет вам восстановить нужный порядок.
Мне не нравится will-change
На данном этапе мне не нравится will-change. Я думаю, что непрямой характер семантики, которую использует will-change, делает его чем-то вроде мистики или магии. То, что вы заявляете, на самом деле не говорит о том, чего вы хотите достичь. Объявляя эти свойства разработчики вовсе не хотят заявить «я изменю эти свойства» (и одновременно принимают все побочные эффекты). Они скорее хотят сказать что-то вроде «поместить это в отдельном слое» или «обрабатывать это как растровое изображение / текстуру». К сожалению, для таких объявлений пока ничего на горизонте не предвидится.
На данный момент у нас есть только will-change, и мой совет: используйте will-change: opacity или backface-visibility: hidden, чтобы вынести элемент в отдельный слой, поскольку при этом побочные эффекты с наименьшей вероятностью создадут проблемы. will-change: transform используйте только в том случае, если вы на самом деле собираетесь изменять преобразование.
Источник: https://dassur.ma/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Практика верстки сайта на CSS Grid с нуля
СмотретьСлои в CSS — Работа со слоями — CSS — Каталог статей
Создавая блок в CSS, мы всегда четко задаем его параметры, а также позиционируем его в определенное место на экране. Таким образом, любой блок имеет две координаты X и Y, которые определяют положение блока на плоскости экрана. Но в CSS есть еще и третья, пространственная координата Z, которая определяет номер слоя, на котором находится блок. Т.е. чем больше координата Z, тем выше этот слой находится по отношению к остальным. Например слой с номером 2 будет ближе расположен к пользователю, просматривающему вашу страницу, чем слой с номером 1. А слой с номером 1, будет располагаться выше, чем основной код страницы.
За создание слоя в CSS отвечает свойство Z-index, а принимаемые им значения, указывают номер слоя.
Например, можно сделать из карт знаменитую комбинацию Royal Flash.
Как видите, каждая карта, немного перекрывает другую. Вот как это выглядит в коде:
Код
.desatka_buba {
position: absolute;
left: 200px;
top: 200px;
z-index: 1;
}
.valet_buba {
position: absolute;
left: 215px;
top: 215px;
z-index: 2;
}
.dama_buba {
position: absolute;
left: 230px;
top: 230px;
z-index: 3;
}
.korol_buba {
position: absolute;
left: 245px;
top: 245px;
z-index: 4;
}
.tuz_bubna {
position: absolute;
left: 260px;
top: 260px;
z-index: 5;
}
Ну а в html коде , просто присваиваете рисункам соответствующие стили, типа:
<img src=»10buba.gif» class=»10_buba»> ну и так далее, вы поняли…
Если хорошенько разобраться с этим простым методом, можно создавать довольно приличные вещи. Например размещать текст над изображением, или наоборот, создавать красивые заголовки , например с эффектом тени, также если поглубже изучить слои, можно создавать выпадающие меню , и многое другое…
Особенности верстки слоями | htmlbook.ru
К сожалению, табличная верстка наложила довольно сильный отпечаток на манеру верстки веб-страниц. И теперь, когда верстка с помощью слоев прочно входит в моду и завоевывает множество поклонников, предыдущие стереотипы пытаются проявиться с новой силой. Так что рассказ об особенностях верстки слоями придется начинать не со слоев, а с таблиц и того багажа, что они с собой принесли.
Не секрет, что большинство сайтов в мире создано с помощью табличной технологии, когда таблица с невидимой границей выступает в качестве опорной модульной сетки документа. Вместе с тем разработчики постепенно переходят на верстку слоями — это интересно, доступно и пользуется популярностью. Но в качестве образца для подражания выбираются именно табличные сайты, поскольку они известны и на виду, и уже их пытаются приспособить под верстку слоями.
Что же в итоге получается? А то, что из конструктора, предназначенного для создания танка, пытаются сделать самолет. Думаете, это невозможно? Нет ничего невозможного, когда под рукой есть напильник и прорва времени. Но с другой стороны, может проще взять нужный конструктор…
Давайте для примера рассмотрим типичную и простую схему компоновки страницы (рис. 1).
Рис. 1. Страница, созданная с помощью таблиц
В самом верху располагается «шапка» документа, где пишется заголовок сайта. Далее идут две колонки одинаковой высоты, колонки при этом для наглядности выделяются разным цветом. В самом низу располагается «подвал» страницы, куда помещают контактную информацию и другие служебные данные. При этом высота всего макета занимает всю доступную высоту окна браузера, т.е. «подвал» располагается у нижнего края веб-страницы. Правда это происходит только в том случае, если текста в колонках не так много. Когда объем текста превышает высоту веб-страницы, она отображается с вертикальной полосой прокрутки.
Несмотря на указанные условия, код, сформированный с помощью таблиц, отличается своей компактностью (пример 1). Для сокращения кода стили не применялись.
Пример 1. Использование таблиц
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Сайт</title>
</head>
<body>
<table cellpadding="5" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#666699"><h2>Заголовок сайта</h2></td>
</tr>
<tr>
<td bgcolor="#990033" valign="top">Левая колонка</td>
<td bgcolor="#999966" valign="top">Правая колонка</td>
</tr>
<tr>
<td colspan="2" bgcolor="#cccccc">Подвал страницы</td>
</tr>
</table>
</body>
</html>Высота таблицы определяется атрибутом height тега <table>. Хотя этот атрибут отсутствует в спецификации HTML, браузеры при отсутствии <!DOCTYPE> его понимают, что и приводит к желаемому результату. Значение 100% говорит, что таблица занимает всю доступную высоту веб-страницы.
Приведенный двухколонный макет достаточно популярен среди разработчиков, поэтому у них возникает мысль реализовать его, но используя исключительно слои, без всяких таблиц. При этом сформировалось два стиля работы или, можно даже сказать, мышления.
- За основу берется табличная верстка и с помощью слоев она воплощается максимально близко к оригиналу.
- Используются особенности слоев, сайт верстается с их учетом.
Сторонники первого метода работы забывают, что имеют дело с совершенно противоположными инструментами, в итоге рождаются оригинальные схемы обхода тех или иных ограничений. Код в подобных случаях разбухает в разы, усложняется работа с ним, а браузеры, как правило, по-разному отображают документ. Приходится обращаться к хакам либо обманывать браузеры другими способами так, чтобы сайт в итоге работал корректно.
Теперь переходим к особенностям слоев, чтобы понять, в чем же суть этого типа верстки.
Слои не таблицы
Несмотря на банальность подобного утверждения, многие разработчики своим трудом опровергают его вновь и вновь. Но стоит только осознать, что это разные инструменты и элементы конструктора, как сразу станет легче и проще. Действительно, таблицы и методы верстки с их помощью лучше применять в одном случае, а слои — в другом. И четко разделять подходы и принципы верстки. Тогда нам не понадобится загонять творческую мысль в прокрустово ложе антагонистичной технологии. Надо просто пойти другим путем.
Высота слоев ограничена высотой контента
В таблице соседние ячейки взаимосвязаны, поэтому высота у них одна, независимо от объема информации. Это хорошо видно, если залить фон ячеек разным цветом. Слои же в каком-то смысле являются независимыми друг от друга, поэтому высота слоя определяется его содержимым. Вид документа при этом будет отличаться от его табличного собрата (рис. 2)
Рис. 2. Страница, созданная с помощью слоев
Высота разных колонок на данном рисунке различается, поскольку формируется за счет их содержимого.
Когда требуется, высоту слоя можно установить через стили, используя для этого разные единицы — проценты, пикселы, дюймы и т.д. Но если содержимое слоя превышает его заданную высоту, то браузеры по-разному интерпретируют этот факт — одни расширяют высоту слоя под новый контент, а другие браузеры, оставляя высоту исходной, накладывают контент поверх слоя.
Блочная верстка
Уже упоминалось, что слои в большинстве случаев являются независимыми друг от друга, за счет чего они как отдельные блоки могут добавляться или удаляться в макете веб-страницы. За такое поведение верстка с помощью слоев получила название «блочная верстка». Слои допустимо вкладывать один в другой для формирования желаемого декоративного элемента. Поэтому под именем «блок» подразумевается не столько отдельный слой, сколько их совокупность.
Расположение колонок
По умолчанию содержимое контейнеров <div> на веб-странице располагаются по вертикали, вначале идет один слой, ниже располагается следующий и т.д. При создании колонок требуется располагать слои рядом по горизонтали, для чего применяется несколько методов. Одним из распространенных является использование стилевого свойства float. Хотя он предназначен для создания обтекания вокруг элемента, с тем же успехом float устанавливает и колонки. Но здесь следует учесть одну особенность. При уменьшении окна браузера до некоторой критической ширины, колонки перестают располагаться горизонтально и перестраиваются друг под другом по вертикали. С этим фактом либо остается смириться, либо использовать другие методы формирования колонок через слои.
Резюме
Вид страниц и их поведение в браузере различается от того, каким способом сверстан документ — с помощью таблиц или слоев. Каждый из этих способов верстки имеет свои особенности, которые влияют в итоге на отображение веб-страницы. Что свойственно таблицам и документам, созданным на их основе, не является признаком слоев, и наоборот. Если это понимать и четко разграничивать сферы применения таблиц и слоев и не пытаться втиснуть одно в формат другого, то верстка сайтов со слоями существенно упрощается и становится более эффективной.
HTML тег layer | назначение, синтаксис, атрибуты, примеры
Последнее обновление: 24.02.2009
Тег <layer> (англ. layer — слой) — тег-контейнер, создает слой с абсолютным позиционированием.
Блочный элемент.
HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
Синтаксис
<layer>...</layer>
Атрибуты
Основные Вспомогательные События
| above | имя нижнего, по сравнению с текущим, слоя |
|---|---|
| background | URL фоновой картинки |
| below | имя верхнего, по сравнению с текущим, слоя |
| bgcolor | цвет фона |
| clip | координаты видимой области слоя |
| height | задает высоту слоя |
| id | уникальный идентификатор |
| left | смещение слоя влево относительно родительского контейнера |
| name | уникальное имя слоя |
| onblur | потеря фокуса элементом |
| onfocus | получение фокуса элементом |
| onload | окончание загрузки слоя |
| onmouseout | смещение указателя мыши с элемента |
| pagex | х-коотдината абсолютного позиционирования слоя |
| pagey | y-коотдината абсолютного позиционирования слоя |
| src | URL документа, который будет показан в границах слоя |
| top | |
| visibility | определяет видимость слоя. Возможные варианты show, hide, inherit |
| width | задает ширину слоя |
| z-index | высота слоя. Обычно используется в случае перекрывающихся слоев |
Пример
<layer bgcolor="#FF0000">
Если Ваш браузер поддерживает тег layer, то данный текст будет выведен на зеленом фоне.
</layer>
Рекомендации по использованию
- закрывающий тег обязателен (</layer>)
- элемент уровня блока, т.е. содержимое тега по умолчанию начинается с новой строки. После тега также добавляется перенос строки (если в свойствах блока не прописано другого)
- обязательных атрибутов нет
- тег отсутствует в стандартах HTML, не пройдет валидацию
- поддерживается только браузерами Netscape
- тег <layer> не рекомендуется использовать, вместо него следует применять тег <div> со свойством position: absolute