لوگو دویکس
ورود / ثبت نام
تگ blink در HTML

تگ blink در HTML

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

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

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

نحوه نوشتن این تگ به این صورت است:

<blink>متن چشمک‌ زن</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);

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

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

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

پشتیبانی مرورگرها

اکثر مرورگرها، از جمله Google Chrome، Mozilla Firefox، Microsoft Edge، Safari و… این تگ را نادیده می‌گیرند و افکت چشمک‌ زنی را نمایش نمی‌دهند.

در دوره آموزش HTML و CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.

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

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