闪烁标签 `` 和跑马灯标签 ``
and (2020)

原始链接: https://danq.me/2020/11/11/blink-and-marquee/

曾经在90年代网页设计中占据重要地位的``和``标签,如今已被大多数现代开发者遗忘。它们分别由网景和IE浏览器引入,允许文本在屏幕上闪烁和滚动。 ``标签,最初被认为是一个玩笑,却广泛用于吸引人们对个人网站元素的注意。微软的``标签则提供了对滚动方向和速度的控制。一种常见的做法是将这两个标签结合使用,根据浏览器显示闪烁或滚动的文本。 虽然这些标签为不同浏览器的网站渐进增强提供了一种方式,但它们常常导致视觉效果刺眼且缺乏可访问性的设计。现代浏览器很大程度上已经放弃了对``的支持,尽管``偶尔还会存在。最终,这些标签成为了对网络早期岁月怀旧的提醒。

一个 Hacker News 的帖子讨论了 90 年代网页设计元素(例如 `` 和 ``)的复兴。原帖作者 90s_dev 表达了想重拾那个时代失落的快乐和奇观的愿望,希望将自己的域名 90s.dev 打造得不仅仅是另一个类似 Neocities 的网站。 用户们纷纷发表评论,其中一人承认自己使用 `` 进行快速的 HTML 测试。另一人询问在 CSS 动画盛行的时代,是否有人找到了 `` 标签真正且非讽刺的用途,对此 90s_dev 回复说它非常适合强调重要信息。 接下来的讨论包括对 Netscape 一个允许使用多个 `` 标签来设置窗口标题动画的 bug 的回忆,以及有人请求重新引入 `<xmp>` 标签。 </div> <form method='post' action='/posts/vote' class='text-right'> <input type='hidden' name='pid' value='49273' /> <button name='vote' value='1' class='btn btn-link fa-solid fa-thumbs-up text-success'></button> <button name='vote' value='-1' class='btn btn-link fa-solid fa-thumbs-down text-error'></button> </form> </div> <div class='column col-4 col-sm-12 pt-2'> <div class='h5 mt-2 mb-2'>相关文章</div> <div> </div> </div> <div class='column col-12'> <hr/> <div class='content'> <div class='h5 mt-2 mb-2'>原文</div> <div readability="124.5577053632"> <p> I was chatting with a fellow web developer recently and made a joke about the <abbr class="abbr" title="Hypertext Markup Language">HTML</abbr> <code><blink></code> and <code><marquee></code> tags, only to discover that he had no idea what I was talking about. They’re a part of web history that’s fallen off the radar and younger developers are unlikely to have ever come across them. But for a little while, back in the 90s, they were a big deal. </p> <figure id="attachment_17882" class="q23-caption aligncenter" aria-describedby="caption-attachment-17882"> <a href="#lightbox-p-attachment_17882" title="Zoom in on image" aria-haspopup="dialog" role="button"><img class="q23-image-17882 size-full" decoding="async" fetchpriority="high" src="/_q23u/2020/11/dreamweaver-blink-marquee.png" alt="Macromedia Dreamweaver 3 code editor window showing a <h2> heading wrapped in <marquee> and <blink> tags, for emphasis." width="1024" height="586"/></a> <figcaption id="caption-attachment-17882" class="q23-caption-text"> Even <a href="https://en.wikipedia.org/wiki/Adobe_Dreamweaver">Macromedia Dreamweaver</a>, which embodied the essence of 1990s web design, seemed to treat wrapping <code><blink></code> in <code><marquee></code> as an antipattern. </figcaption> </figure> <p> Invention of the <code><blink></code> element is often credited to <a href="https://montulli.blogspot.com/">Lou Montulli</a>, who wrote pioneering web browser <a href="https://lynx.invisible-island.net/">Lynx</a> before being joining Netscape in 1994. <a href="http://www.montulli.org/theoriginofthe%3Cblink%3Etag">He insists that he didn’t write any of the code</a> that eventually became the first implementation of <code><blink></code>. Instead, he claims: while out at a bar (on the evening he’d first meet his wife!), he pointed out that many of the fancy new stylistic elements the other Netscape engineers were proposing wouldn’t work in Lynx, which is a text-only browser. The fanciest conceivable effect that would work across both browsers would be making the text flash on and off, he joked. Then another engineer – who he doesn’t identify – pulled a late night hack session and added it. </p> <p> And so it was that <a href="https://www.webdesignmuseum.org/old-software/web-browsers/netscape-navigator-2-0">when Netscape Navigator 2.0 was released in 1995</a> it added support for the <code><blink></code> tag. Also animated <abbr class="abbr" title="Graphics Interchange Format (file)s">GIFs</abbr> and the first inklings of JavaScript, which collectively would go on to <em>define</em> the “personal website” experience for years to come. Here’s how you’d use it: </p> <pre><code><BLINK>This is my blinking text!</BLINK></code></pre> <p> With no attributes, it was clear from the outset that this tag was supposed to be a joke. By the time <abbr class="abbr" title="Hypertext Markup Language, version 4">HTML4</abbr> was published as a a recommendation two years later, <a href="https://www.w3.org/Style/HTML40-plus-blink.dtd">it was <em>documented</em> as being a joke</a>. But the Web of the late 1990s saw it used <em>a lot</em>. If you wanted somebody to notice the “latest updates” section on your personal home page, you’d wrap a <code><blink></code> tag around the title (or, if you were a sadist, the entire block). </p> <figure id="attachment_17890" class="q23-caption aligncenter" aria-describedby="caption-attachment-17890"> <a href="https://www.cameronsworld.net/"><img class="q23-image-17890 size-large" decoding="async" src="/_q23u/2020/11/camerons-world-1024x480.jpg" alt="Cameron's World website, screenshot, showing GIFS and bright pallette" width="640" height="300"/></a> <figcaption id="caption-attachment-17890" class="q23-caption-text"> If you missed this particular chapter of the Web’s history, you can simulate it at <a href="https://www.cameronsworld.net/">Cameron’s World</a>. </figcaption> </figure> <p> In the same year as Netscape Navigator 2.0 was released, <a href="https://www.webdesignmuseum.org/old-software/web-browsers/internet-explorer-2-0">Microsoft released Internet Explorer 2.0</a>. At this point, Internet Explorer was still very-much playing catch-up with the features the Netscape team had implemented, but clearly some senior Microsoft engineer took a look at the <code><blink></code> tag, refused to play along with the joke, but had an innovation of their own: the <code><marquee></code> tag! It had <a href="http://www.lissaexplains.com/fun3.shtml">a whole suite of attributes</a> to control the scroll direction, speed, and whether it looped or bounced backwards and forwards. While <code><blink></code> encouraged disgusting and inaccessible design as a joke, <code><marquee></code> did it on purpose. </p> <pre><code><MARQUEE>Oh my god this still works in most modern browsers!</MARQUEE></code></pre> <blockquote readability="5"> <p> <marquee>Oh my god this still works in most modern browsers!</marquee> </p> <footer> <small>If you see the text above moving… you’re looking at a living fossil in browser history.</small> </footer> </blockquote> <p> But here’s the interesting bit: for a while in the late 1990s, it became a somewhat common practice to wrap content that you wanted to emphasise with animation in <em>both</em> a <code><blink></code> and a <code><marquee></code> tag. That way, the Netscape users would see it flash, the <abbr class="abbr" title="Internet Explorer">IE</abbr> users would see it scroll or bounce. Like this: </p> <pre><code><MARQUEE><BLINK>This is my really important message!</BLINK></MARQUEE></code></pre> <figure id="attachment_17887" class="q23-caption aligncenter" aria-describedby="caption-attachment-17887"> <a href="#lightbox-p-attachment_17887" title="Zoom in on image" aria-haspopup="dialog" role="button"><img class="q23-image-17887 size-full" decoding="async" src="/_q23u/2020/11/IE5.gif" alt="Internet Explorer 5 showing a marquee effect." width="640" height="480"/></a> <figcaption id="caption-attachment-17887" class="q23-caption-text"> Wrap a <code><blink></code> inside a <code><marquee></code> and <abbr class="abbr" title="Internet Explorer">IE</abbr> users will see the marquee. Delightful. </figcaption> </figure> <p> The web has always been built on <a href="https://en.wikipedia.org/wiki/Robustness_principle">Postel’s Law</a>: a web browser should assume that it won’t understand everything it reads, but it should provide a best-effort rendering for the benefit of its user anyway. Ever wondered why the modern <code><video></code> element is a block rather than a self-closing tag? It’s so you can embed <em>within</em> it code that an earlier browser – one that doesn’t understand <code><video></code> – can read (a browser’s default state when seeing a new element it doesn’t understand is to ignore it and carry on). So embedding a <code><blink></code> in a <code><marquee></code> gave you the best of both worlds, right? <em>(welll…)</em> </p> <figure id="attachment_17889" class="q23-caption aligncenter" aria-describedby="caption-attachment-17889"> <a href="#lightbox-p-attachment_17889" title="Zoom in on image" aria-haspopup="dialog" role="button"><img class="q23-image-17889 size-full" decoding="async" loading="lazy" src="/_q23u/2020/11/Netscape5.gif" alt="Netscape Navigator 5 showing a blink effect." width="640" height="480"/></a> <figcaption id="caption-attachment-17889" class="q23-caption-text"> Wrap a <code><blink></code> inside a <code><marquee></code> and Netscape users will see the blink. Joy. </figcaption> </figure> <p> Better yet, you were safe in the knowledge that anybody using a browser that didn’t understand <em>either</em> of these tags could <em>still read your content</em>. Used properly, the web is about <em>progressive enhancement</em>. Implement for everybody, enhance for those who support the shiny features. JavaScript and <abbr class="abbr" title="Cascading Style Sheets">CSS</abbr> can be applied with the same rules, and doing so pays dividends in maintainability and accessibility (though, sadly, that doesn’t stop people writing sites that needlessly <em>require</em> these technologies). </p> <figure id="attachment_17891" class="q23-caption aligncenter" aria-describedby="caption-attachment-17891"> <a href="#lightbox-p-attachment_17891" title="Zoom in on image" aria-haspopup="dialog" role="button"><img class="size-full q23-image-17891" decoding="async" loading="lazy" src="/_q23u/2020/11/Opera5.gif" alt="Opera 5 showing no blinking nor marquee text." width="640" height="480"/></a> <figcaption id="caption-attachment-17891" class="q23-caption-text"> Personally, I was a (paying! – back when people used to pay for web browsers!) Opera user so I mostly saw neither <code><blink></code> nor <code><marquee></code> elements. I don’t feel like I missed out. </figcaption> </figure> <p> I remember, though, the first time I tried Netscape 7, in 2002. Netscape 7 and its close descendent are, as far as I can tell, the only web browsers to support <em>both</em> <code><blink></code> and <code><marquee></code>. Even then, it was picky about the order in which they were presented and the elements wrapped-within them. But support was good enough that some people’s personal web pages suddenly began to exhibit the most ugly effect imaginable: the combination of both scrolling and flashing text. </p> <figure id="attachment_17892" class="q23-caption aligncenter" aria-describedby="caption-attachment-17892"> <a href="#lightbox-p-attachment_17892" title="Zoom in on image" aria-haspopup="dialog" role="button"><img class="size-full q23-image-17892" decoding="async" loading="lazy" src="/_q23u/2020/11/Netscape7.gif" alt="Netscape 7 showing text that both blinks and marquee-scrolls." width="640" height="480"/></a> <figcaption id="caption-attachment-17892" class="q23-caption-text"> If Netscape 7’s <abbr class="abbr" title="User Interface">UI</abbr> didn’t already make your eyes bleed (I’ve toned it down here by installing the “classic skin”), its simultaneous rendering of <code><blink></code> and <code><marquee></code> would. </figcaption> </figure> <p> The <code><blink></code> tag is very-definitely <a href="https://caniuse.com/?search=blink">dead</a> (<a href="http://tstbtbt.com/">hurrah!</a>), but you can <a href="https://www.w3docs.com/snippets/css/how-to-create-a-blinking-effect-with-css3-animations.html">bring it back with pure </a><abbr class="abbr" title="Cascading Style Sheets"><a href="https://www.w3docs.com/snippets/css/how-to-create-a-blinking-effect-with-css3-animations.html">CSS</a></abbr> if you must. <code><marquee></code>, amazingly, still <a href="https://caniuse.com/?search=marquee">survives</a>, not only in <a href="https://remysharp.com/2008/09/10/the-silky-smooth-marquee/">polyfills</a> but <em>natively</em>, as you might be able to see above. However, if you’re in any doubt as to whether or not you should use it: you shouldn’t. If you’re looking for digital nostalgia, <a href="https://theoutline.com/post/8442/internet-nostalgia-2010s-geocities-tumblr-vaporwave">there’s a whole rabbit hole to dive down</a>, but you don’t need to inflict <code><marquee></code> on the rest of us. </p> <dialog id="lightbox-attachment_17882" class="lightbox"> <p id="lightbox-p-attachment_17882"> <a href="/_q23u/2020/11/dreamweaver-blink-marquee.png"><img class="q23-image-17882 size-full" decoding="async" fetchpriority="high" src="/_q23u/2020/11/dreamweaver-blink-marquee.png" alt="Macromedia Dreamweaver 3 code editor window showing a <h2> heading wrapped in <marquee> and <blink> tags, for emphasis." width="1024" height="586" loading="lazy"/></a> </p><a class="close" href="#attachment_17882" title="Close image" role="button">×</a> </dialog> <dialog id="lightbox-attachment_17887" class="lightbox"> <p id="lightbox-p-attachment_17887"> <a href="/_q23u/2020/11/IE5.gif"><img class="q23-image-17887 size-full" decoding="async" src="/_q23u/2020/11/IE5.gif" alt="Internet Explorer 5 showing a marquee effect." width="640" height="480" loading="lazy"/></a> </p><a class="close" href="#attachment_17887" title="Close image" role="button">×</a> </dialog> <dialog id="lightbox-attachment_17889" class="lightbox"> <p id="lightbox-p-attachment_17889"> <a href="/_q23u/2020/11/Netscape5.gif"><img class="q23-image-17889 size-full" decoding="async" loading="lazy" src="/_q23u/2020/11/Netscape5.gif" alt="Netscape Navigator 5 showing a blink effect." width="640" height="480"/></a> </p><a class="close" href="#attachment_17889" title="Close image" role="button">×</a> </dialog> <dialog id="lightbox-attachment_17891" class="lightbox"> <p id="lightbox-p-attachment_17891"> <a href="/_q23u/2020/11/Opera5.gif"><img class="size-full q23-image-17891" decoding="async" loading="lazy" src="/_q23u/2020/11/Opera5.gif" alt="Opera 5 showing no blinking nor marquee text." width="640" height="480"/></a> </p><a class="close" href="#attachment_17891" title="Close image" role="button">×</a> </dialog> <dialog id="lightbox-attachment_17892" class="lightbox"> <p id="lightbox-p-attachment_17892"> <a href="/_q23u/2020/11/Netscape7.gif"><img class="size-full q23-image-17892" decoding="async" loading="lazy" src="/_q23u/2020/11/Netscape7.gif" alt="Netscape 7 showing text that both blinks and marquee-scrolls." width="640" height="480"/></a> </p><a class="close" href="#attachment_17892" title="Close image" role="button">×</a> </dialog> </div> </div> </div> </div> <div class='clear'></div> </div> <div style='position:fixed; bottom:0; left:0; right:0;'> </div> <div align='center' style='border-top:1px solid #EEE; padding:1em; margin-top:2em;'> 联系我们 contact @ memedata.com </div> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-PFMR8YTWGP"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-PFMR8YTWGP'); </script> </body> </html>