هشدار: این عمل صرفا یک تکنیک به شمار می ره و به هیچ وجه استفاده از اون در صفحات وب توصیه نمی شه. در پست عناصر کاذب در CSS گفتیم استفاده از این عناصر فراگیر نشده چون مرورگرها به طور کامل هنوز این المان ها رو پشتیبانی نمی کنند. در این پست مثالی رو بررسی می کنیم که به اهمیت این المان ها و کاربرد های متعدد آن ها پی ببرید و به پشتیبانی نکردن IE از این المان ها بیشتر افسوس بخورید.

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

تا اینجا یه حالت مقدمه بود اما اصل مطلب: ما قصد داریم به کمک CSS آدرس ایمیل رو پنهان کنیم. برای این کار مشخصه ای از CSS با صفات زیر ایجاد می کنیم:

a:link:before {
content: ""attr(title)"@"attr(rel)"";
}

در بالا ما از تابع attr برای تشخیص قسمت های مختلف آدرس ایمیل استفاده می کنیم. دقیقا مثل یک آرگومان ارسالی به یک تابع در زبان برنامه نویسی! برای این کار سعی کردیم آرگومان رو طوری نامگذاری کنیم که صفحه از حالت استاندارد خودش خارج نشه. حالا کافیه آرگومان های متناسب رو توسط تکه کد HTML زیر به تابع ارسال کنیم:

<a class="email" title="alvani" rel="gmail.com" href="mailto:alvani&#91;at symbol&#93;gmail.com"></a>

در بالا مشخصه ی title در بر دارنده کلمه قبل از علامت @ است و rel برای عبارت بعد از آن. مقدار herf رو هم با فرمت کد شده آدرس ایمیل پر کنید. صفحه ای که حاوی متد فوق باشه وقتی در مرورگر فایر فاکس امتحان بشه نتیجه باور نکردنیه داره اما وقتی در IE امتحانش کنید در کمال ناباوری، هیچ چیزی دیده نمی شه. دقت کنید این به هیچ عنوان نشانگر ضعف CSS نیست، بلکه بیان کننده ضعف مرورگره!