Те из вас, кто давно пишет HTML, могут помнить этот элемент. Это был специфичный для браузера элемент, который создавал баннер с прокручивающимся текстом на экране. Этот элемент никогда не добавлялся в HTML спецификация и поддержка широко варьировались в разных браузерах. У людей часто было очень строгое мнение об использовании этого элемента - как положительное, так и отрицательное. Но любите вы это или ненавидите, он действительно служил для того, чтобы сделать видимым контент, выходящий за границы поля.
Одной из причин, по которой он не был полностью реализован браузерами, помимо твердого личного мнения, было то, что это считается визуальным эффектом, и поэтому его не следует определять в HTML, который определяет состав. Вместо этого визуальными или презентационными эффектами следует управлять с помощью CSS. И CSS3 добавляет модуль marquee, чтобы контролировать, как браузеры добавляют эффект шатра элементам.
Новые свойства CSS3
CSS3 добавляет пять новые свойства, чтобы помочь контролировать отображение содержимого в области выделения: стиль переполнения, стиль выделения, количество воспроизведений, направление выделения и скорость выделения.
стиль переполнения
Свойство стиля переполнения (которое мы также обсуждали в статье «Переполнение CSS») определяет предпочтительный стиль для содержимого, которое выходит за пределы поля содержимого. Если вы установите значение marquee-line или marquee-block, ваш контент будет скользить влево / вправо (marquee-line) или вверх / вниз (marquee-block).
шатер
Это свойство определяет, как контент будет отображаться (и удаляться). Варианты прокрутка, слайд и чередование. Прокрутка начинается с того, что содержимое полностью находится за пределами экрана, а затем перемещается по видимой области до тех пор, пока полностью не исчезнет с экрана. Слайд начинается с содержимого полностью за пределами экрана, а затем перемещается по нему до тех пор, пока содержимое полностью не переместится на экран и на экране не останется содержимого для скольжения. И, наконец, альтернативный вариант перемещает контент из стороны в сторону, перемещаясь вперед и назад.
подсчет шатра
Одним из недостатков использования элемента MARQUEE является то, что выделение никогда не останавливается. Но с помощью свойства стиля marquee-play-count вы можете настроить выделение для поворота содержимого и выключения определенное количество раз.
направление выделения
Вы также можете выбрать направление, в котором контент будет прокручиваться на экране. Значения вперед и назад основаны на направленности текста, когда стиль переполнения - линия выделения, и вверх или вниз, когда стиль переполнения - блок выделения.
Детали направления выделения
стиль переполнения |
Направление языка | вперед | обеспечить регресс |
|---|---|---|---|
шатер |
ltr | оставил | верно |
| RTL | верно | оставил | |
шатер |
вверх | вниз |
скорость бега
Это свойство определяет, насколько быстро содержимое прокручивается на экране. Значения: медленный, нормальный и быстрый. Фактическая скорость зависит от содержимого и браузера, отображающего его, но значения должны быть медленнее, чем обычно, то есть медленнее, чем быстро.
Браузер Поддержка свойств Marquee
Возможно, вам придется использовать префиксы поставщиков чтобы заставить работать элементы выделения CSS. Вот они:
| CSS3 | Префикс поставщика |
|---|---|
overflow-x: выделенная линия; |
переполнение-x: -webkit-marquee; |
шатер |
-webkit-marquee-style |
подсчет шатра |
-webkit-marquee-повторение |
направление выделения: вперед | назад; |
-webkit-marquee-direction: вперед | назад; |
скорость бега |
-webkit-marquee-скорость |
| нет эквивалента | -webkit-marquee-increment |
Последнее свойство позволяет определить, насколько большими или маленькими должны быть шаги при прокрутке содержимого на экране в области выделения.
Чтобы ваша область работала, вы должны сначала поместить значения с префиксом поставщика, а затем следовать за ними со значениями спецификации CSS3. Например, вот CSS для выделения, которое прокручивает текст пять раз слева направо внутри поля 200x50.
{
ширина: 200 пикселей; высота: 50 пикселей; белое пространство: nowrap;
переполнение: скрыто;
переполнение-x: -webkit-marquee;
-webkit-marquee-direction: вперед;
-webkit-marquee-style: прокрутка;
-webkit-marquee-speed: нормальный;
-webkit-marquee-increment: маленький;
-webkit-marquee-повторение: 5;
overflow-x: выделенная линия;
направление выделения: вперед;
стиль выделения: прокрутка;
скорость бега: нормальная;
количество игровых шатров: 5;
}