تگ blink در HTML

دسته بندی : آموزش HTML سطح مقاله : متوسط زمان مطالعه : 2 دقیقه آخرین بروز رسانی: 09 آذر 1399

تگ blink در HTML یک تگ منسوخ شده است و در HTML 4.01 برای ایجاد یک متن چشمک‌ زن استفاده می‌شد اما استفاده از این تگ در HTML5 و نسخه‌های جدیدتر توصیه نمی‌شود و به دلیل اینکه افکت چشمک‌ زدن ممکن است کاربران را آزرده و ناراحت کند، توسط استانداردهای جدید HTML پشتیبانی نمی‌شود.

نکات اصلی تگ blink در HTML

تگ blink که برای ایجاد محتوای چشمک زن در صفحه نمایش استفاده می‌شد نه تنها در تمام مرورگرهای مدرن منسوخ شده است، بلکه برخی از مرورگرها دیگر از آن پشتیبانی نمی‌کنند و آن را نمایش نمی‌دهند.

چند دلیل کلیدی برای منسوخ شدن تگ blink در HTML وجود دارد:

1. مشکلات دسترسی:

تگ blink برای افراد مبتلا به صرع یا سایر اختلالات حساس به نور می‌تواند مضر باشد.
چشمک زدن متن می‌تواند برای خواندن دشوار باشد، به خصوص برای افراد دارای مشکلات بینایی.
استفاده از blink می‌تواند برای کاربران صفحه خوان مشکل ایجاد کند، زیرا آنها نمی‌توانند بفهمند متن چشمک زن چه معنایی دارد.

2. تجربه کاربری ضعیف:

استفاده بیش از حد از blink می‌تواند آزاردهنده و حواس‌پرت‌کن باشد.
این تگ می‌تواند ظاهری غیرحرفه‌ای و بی‌قواره به صفحه وب بدهد.
راه‌های بهتر و ظریف‌تری برای جلب توجه کاربران به متن مهم وجود دارد، مانند استفاده از رنگ‌های متضاد یا افکت‌های انیمیشن ظریف.

3. ناسازگاری با استانداردهای وب:

تگ blink هرگز به طور کامل در استانداردهای HTML پشتیبانی نشده بود و در نهایت در HTML 4.01 منسوخ شد.
مرورگرهای وب مدرن به طور کامل از blink پشتیبانی نمی‌کنند و ممکن است در مرورگرهای مختلف به طور متفاوتی عمل کند.
استفاده از تکنولوژی‌های وب مدرن و استاندارد مانند CSS و JavaScript برای ایجاد افکت‌های بصری، بسیار پایدارتر و سازگارتر است.

4. وجود جایگزین‌های بهتر:

CSS راه‌های بسیاری برای ایجاد افکت‌های بصری جذاب و پویا، مانند animation و transitions ارائه می‌دهد که بسیار قابل کنترل‌تر و انعطاف‌پذیرتر از blink هستند.
جاوا اسکریپت نیز می‌تواند برای ایجاد افکت‌های تعاملی پیچیده‌تر و کاربرپسندتر استفاده شود.

در نهایت، استفاده از تگ blink به دلیل مشکلات دسترسی، تجربه کاربری ضعیف، ناسازگاری با استانداردهای وب و وجود جایگزین‌های بهتر، در HTML منسوخ شده است.

توصیه می‌شود به جای blink از CSS یا جاوا اسکریپت برای ایجاد افکت‌های بصری در صفحات وب خود استفاده کنید. این روش‌ها به شما امکان می‌دهد به روشی دسترسی‌پذیر، سازگار و کاربرپسند، به محتوای خود توجه جلب کنید.

جایگزین برای تگ blink

از آنجا که تگ چشمک زن HTML هرگز به طور جهانی پشتیبانی نمی‌شد، یک ویژگی CSS به عنوان یک گزینه جایگزین ارائه شد؛ ویژگی “text-decoration: blink”.

این ویژگی موجب می‌شود که متن مشخص شده در یک صفحه وب یا اپلیکیشن به صورت چشمک‌ زن نمایش داده شود، یعنی متن به طور متناوب نمایان و مخفی شود، نحوه نوشتن این ویژگی به صورت زیر است:

<span style="text-decoration: blink;">متن چشمک‌ زن</span>

همانند تگ blink که استفاده از آن در نسخه‌های جدید HTML توصیه نمی‌شود، استفاده از ویژگی “text-decoration: blink” نیز توصیه نمی‌شود زیرا این افکت برای مخاطبان ناراحتی ایجاد می‌کند و ممکن است که مرورگرهای مختلف آن را نمایش ندهند، برای آشنایی با ویژگی‌های CSS پیشنهاد می‌کنیم مقالات آموزش CSS را مطالعه کنید.

با این اوصاف اگر خیلی واجب است که متن شما چشمک بزند، می‌توانید از JavaScript برای انجام این کار استفاده کنید اما باید بدانید که این کار به آسانی استفاده از یک جفت تگ ساده نخواهد بود.

برای ایجاد یک متن چشمک‌ زن با استفاده از جاوا اسکریپت می‌توانید از توابع تایمینگ مانند setInterval استفاده کنید؛ در ادامه یک مثال ساده برای ایجاد یک متن چشمک‌ زن با جاوااسکریپت آورده شده است:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* این استایل برای تغییر رنگ متن استفاده شده است */
        .blinking-text {
            color: red;
        }
    </style>
    <title>متن چشمک‌ زن با جاوا اسکریپت</title>
</head>
<body>

<p id="blinkingText" class="blinking-text">متن چشمک‌ زن</p>

<script>
    // دریافت المان متن چشمک‌ زن
    var blinkingText = document.getElementById('blinkingText');

    // تابع برای تغییر وضعیت نمایش/مخفی کردن متن
    function toggleBlink() {
        if (blinkingText.style.visibility === 'hidden') {
            blinkingText.style.visibility = 'visible';
        } else {
            blinkingText.style.visibility = 'hidden';
        }
    }

    // تنظیم تابع toggleBlink به صورت دوره‌ای (با فاصله زمانی)
    setInterval(toggleBlink, 500); // اینجا 500 میلی‌ ثانیه فاصله زمانی برای چشمک‌ زن قرار داده شده است
</script>

</body>
</html>

در این مثال، تابع toggleBlink وظیفه تغییر وضعیت نمایش/مخفی کردن متن را دارد و با استفاده از تابع setInterval این تابع به صورت دوره‌ای فراخوانی می‌شود تا افکت چشمک‌ زن ایجاد شود؛ شما می‌توانید مقدار زمانی که در setInterval استفاده شده است را تغییر دهید تا سرعت چشمک‌ زدن متن را تنظیم کنید.

کد html متن چشمک زن با استفاده از جاوااسکریپت

کدی که در ادامه ارائه می‌شود یک قطعه کد JavaScript برای ایجاد یک افکت چشمک‌ زن است؛ این کد از تابع setInterval برای فراخوانی تابعی که وضعیت نمایش متن را تغییر می‌دهد، با فاصله زمانی مشخص (که در اینجا 500 میلی‌ ثانیه است) استفاده می‌کند و شما می‌توانید در پروژه‌هایتان از آن استفاده کنید.

var blink_speed = 500;
var t = setInterval(function () {
  var ele = document.getElementById('blinker');
  ele.style.visibility = (ele.style.visibility == 'hidden' ? '' : 'hidden');
}, blink_speed);

پایان تگ blink در HTML

در سال 1996، یک متخصص وب به نام Jakob Nielsen مقاله‌ای را با نام “10 اشتباه برتر در طراحی وب” منتشر کرد که در آن ذکر کرده بود از افکت چشمک زن متنفر است!

یکی از دلایل منفور شدن تگ blink استفاده بیش از حد از آن بود؛ به طور مداوم چشمک زن صفحات، تجربه کاربر را وحشتناک می‌کند و خواندن چنین متنی بسیار دشوار است!

در نهایت تگ blink در دسامبر سال 1999 توسط W3C (کنسرسیوم جهانی وب) از استانداردهای HTML خارج شد.

این مقاله چقدر براتون مفید بود؟

میانگین رتبه : 5/5 - تعداد رای : 2