Marquee in CSS - Посібник для початківців
Marquee був вперше введений в Internet Explorer і був дуже популярний в 90-х, перш ніж W3C вирішив виключити його зі стандартного елемента HTML через проблеми з юзабіліті. Веб-дизайнерам рекомендується не використовувати тег.
Дивно, однак, шатер тепер робить повернення, не в тезі форматі, як це було, але в CSS-модулі. Цей модуль доступний як частина специфікації Webkit CSS, і W3C тепер працює над подібним модулем. Однак, оскільки версія W3C все ще перебуває на етапі Рекомендації щодо кандидатів, вона поки що не застосовується. Отже, на цей час ми охопимо лише одну з специфікації Webkit.
Синтаксис
Перш за все, область може бути визначена за допомогою наступного короткого синтаксису.
-webkit-marquee: [напрямок] [збільшення] [повторення] [стиль] [швидкість]
Я вважаю, що кожне з значень, необхідних у синтаксисі вище, є досить зрозумілими, інакше ви можете знайти їх достатньо пояснені в цій документації. Отже, якщо ви хочете глибше заглибитися в роботу цього синтаксису, ви завжди можете спочатку звернутися до документації.
Потім приєднайтеся до нас, коли ми перейдемо до створення деяких реальних прикладів і подивимося, як він діє.
Приклад 1: Прокручування тексту
Гаразд, у першому прикладі ми створимо класичний рух рамки, що має переміщення тексту справа наліво.
Давайте створимо нашу текстову розмітку, як показано нижче:
Льодяник доліва лимонних крапель jujubes applicake кекс терпкий солодовий лаваш кунжут.
Потім визначте поле з наступним синтаксисом.
-webkit-marquee: автоматичний нескінченний прокручування середнього значення; переповнення-x: -webkit-marquee;
Коли напрямок рамки встановлено на авто, за замовчуванням вона буде рухатися праворуч вліво; альтернативно можна змінити це значення на зліва. Також зверніть увагу, що overflow-x має бути встановлено значення -webkit-marquee щоб вміст завжди діяв як один. Якщо ви виключите цю властивість, текст не перейде далі.
Дивіться демо.
Приклад 2: Відскік вперед і назад
У другому прикладі ми спробуємо надати іншому стилю шату. Цього разу ми використовуємо альтернативні замість прокручування і змінити значення напрямку на право. Таким чином, область буде рухатися зліва вправо, а потім повертається вперед і назад.
-webkit-marquee: автоматичне середнє нескінченне чергування; переповнення-x: -webkit-marquee;
Дивіться демо
Приклад 3: Переміщення тексту вгору
А для останнього прикладу, ми будемо змінювати напрямок рамки, щоб рухатися вгору. Є два напрямок значення для цього; Ви можете змінити значення на вгору або вперед.
Особисто я не розумію, чому Webkit надав дві цінності, які, по суті, роблять те ж саме, оскільки я думаю, що це може призвести до плутанини для деяких людей.
-webkit-marquee: до середнього нескінченного прокручування нормального; переповнення-x: -webkit-marquee;
Дивіться демо
Крім того, я зібрав ще кілька прикладів, але вони будуть переважними, якщо всі вони пояснюються тут.
Але, ви можете переглянути всі демо і завантажити джерела з посиланням нижче.
- Демо
- Завантажити джерело
Заключна думка та посилання
Я був перший здивований що є досі інтерес у marquee, котрий я подумав зустрів його кінець. Це також призвело мене до питання, як CSS модуль, як це буде корисно. Фактично кожен браузер все ще підтримує спадщину тег.
Так що ж ви думаєте? Чи є шатер досі актуальним у цьому віці і чи буде він корисним у сучасному веб-дизайні?
Якщо ви все ще цікавитеся цим предметом, ви можете відвідати деякі з наведених нижче посилань:
- Посилання CSS Safari
- Генератор шатунів Webkit
- Комплексна документація старого
тега з Sitepoint. - І завжди є генератор для майже всього, включаючи цей генератор Marquee.
