parsgreen.com
article

مخفی کردن عناصر وب با CSS

css-display-none

گاهی مواقع در طراحی صفحات وب و کدنویسی HTML و CSS ممکن است بنا به دلایل مختلف نیاز به این داشته باشیم که مواردی را از چشم کاربران عادی پنهان و مخفی کنیم، به طور مثال شرایطی پیش می آید که بخواهیم بین کاربران عادی و ربات ها تفکیک قائل شویم، یعنی به طور مثال یک فیلد را فقط به ربات ها نشان دهیم، در چنین شرایطی برخی ترجیح می دهند از برنامه نویسی سمت سرور مانند PHP یا ASP در این گونه موارد استفاده کنند و برخی نیز به جاوا اسکریپت متوصل می شوند، اما در کنار همه این روش ها که در جای خود کاربرد دارند، شاید یکی از بهترین و کاربردی ترین راه ها، استفاده از قابلیت های CSS باشد که در ادامه آموزش به آنها اشاره می کنیم.

چرا عناصر را در صفحه وب پنهان می کنیم؟


شاید این سوال در ذهنتان باشد که چه نیازی است عناصر را در صفحات وب مخفی و پنهان کنیم؟
البته این کار همیشه هم ضرورت ندارد، بلکه استفاده از این قابلیت در صفحات وب بستگی به شرایط و نیاز شما دارد، به طور مثال فرض کنید یک سیستم ضد ارسال هرزنامه یا اسپم ایجاد کرده اید که متکی بر پر شدن یا نشدن یک فیلد در یک فرم HTML است، به این صورت که اگر فیلد مورد نظر پر شود یعنی کاربر یک ربات است و اگر خالی باشد یعنی کاربر یک انسان است، همان طور که می دانیم ربات ها صفحات وب را معمولا بدون پردازش CSS و به صورت کد HTML دریافت می کنند، لذا آن فیلد مخفی برای آنها قابل رویت است و بنابراین به همراه سایر فیلدهای موجود در فرم، آن را هم به احتمال خیلی زیاد با عباراتی پر می کنند، اما با مخفی کردن فیلد برای کاربران عادی آنها نمی توانند در شرایط معمولی فیلد را مشاهده کنند و لذا نباید اطلاعاتی در آن وارد نمایند، حتی می توان با درج عبارتی مانند "در این فیلد چیزی ننویسید" کاربرانی که استایل CSS در مرورگرشان غیر فعال است را نیز راهنمایی کرد، یا به طور مثال اگر بخواهیم یک ابزار یا یک عبارت، بنا به دلایل مختلف فقط برای ربات ها قابل رویت باشد، نیاز به استفاده از CSS است.

استفاده از display:none


ابتدایی ترین روشی مخفی کردن عناصر در صفحات وب با CSS استفاده از خاصیت display و با مقادیر none است، به این صورت لایه یا بلاک مورد نظر با وجود اینکه در صفحه وجود دارد، ولی از چشم کاربران عادی (در شرایط معمول و با فعال بودن استایل CSS) پنهان است، برای استفاده از این خاصیت کافی است آن را به صورت یک کلاس یا آی دی و یا به صورت استایل خطی به عنصر مورد نظر نسبت دهیم.
<style type="text/css">
.hidden{
    display:none;
}
</style>
نکته: بعضا مشاهده می شود که برای مخفی کردن لینک ها یا به اصطلاح فریب دادن ربات های جستجوگر مانند ربات گوگل، از این خاصیت استفاده می شود،  به یاد داشته باشیم ربات ها و از جمله ربات گوگل بر اساس الگوریتم های خود این گونه موارد را شناسایی کرده و در صورت تکرار ممکن است سایت یا وبلاگ ما را در لیست سیاه خود قرار داده یا حداقل رتبه آن را کاهش دهند، لذا استفاده از display:none باید با دقت و به تعداد خیلی کم انجام شود.

استفاده از visibility:hidden


یکی دیگر از خاصیت های CSS که در مخفی کردن عناصر در صفحات وب کاربرد دارد، خاصیت visibility:hidden است، البته عملکرد visibility:hidden تا حدود زیادی مشابه display:none است، با این تفاوت که visibility:hidden اگرچه عنصر را در صفحه مخفی می کند، اما بر خلاف display:none اثر آن را به طور کامل از بین نمی برد، به عنوان مثال اگر یک بلاک با ارتفاع 200 پیکسل را با display:none مخفی کنیم، فضای 200 پیکسلی اشغال شده نیز از بین می رود، اما اگر همین کار را با visibility:hidden انجام دهیم، بلاک مخفی می شود، بدون اینکه 200 پیکسل فضای اشغال شده از بین برود.
<style type="text/css">
#visibility{
    visibility:hidden;
}
</style>

استفاده از position:absolute و left


تکنیک هایی که در بالا اشاره شد اگرچه روش هایی استاندارد و در جای خود قابل استفاده هستند، اما کاربرد زیاد آنها در یک صفحه به لحاظ سئو (SEO) یا بهینه سازی موتورهای جستجو (Search Engine Optimization) توصیه نمی شود، از این رو طراحان و برنامه نویسان از روش دیگری برای مخفی نمودن عناصر HTML در صفحات وب استفاده می کنند، در این روش ابتدا با استفاده از خاصیت position:absolute عنصر را به حالت شناور در آورده و سپس با کمک left و در نظر گرفتن یک مقدار منفی برای آن، عنصر را از دید کاربران مخفی می کنند بدون اینکه تاثیری در ظاهر صفحه ایجاد شود.
<style type="text/css">
.accessible{
    position:absolute;
    left:-9999px;
    top:auto;
    width:5px;
    height:5px;
    overflow:hidden;
}
</style>
توضیح:
- مقادیر absolute برای خاصیت position باعث شناور شدن بلاک یا عنصر مورد نظر می شود.
- مقدار منفی برای left، عنصر را به بیرون از دید کاربر و خارج از صفحه نمایش هدایت می کند.
- مقادیر width و height می توانند صفر در نظر گرفته شوند، اما برای اطمینان از اینکه ربات هایی مانند ربات گوگل محتوای بلاک را پردازش کنند، بهتر است مقداری بیش از صفر یا 1 برای ارتفاع و عرض در نظر گرفته شود.
- خاصیت overflow با مقادیر hidden باعث می شود که محتوای مازاد بر فضای بلاک، مخفی شود.
نکته: وقتی از مقادیر منفی برای خاصیت left استفاده می کنیم، باید در نظر داشته باشیم که چینش (direction) صفحه در تگ body به صورت پیش فرض یا چپ به راست (ltr) باشد، در غیر این صورت (یعنی اگر تگ body چینش rtl یا راست به چپ داشته باشد) در صفحه اسکرول افقی خواهیم داشت، در این گونه موارد به جای left باید از right و مقادیر منفی برای کلاس مخفی استفاده کنیم یا اینکه چینش را در تگ body به حالت ltr تغییر دهیم و یا اگر ناچار به استفاده از چینش rtl هستیم، آن را به بلاک های زیرمجموعه نسبت دهیم نه به تگ body.
sectionدسته بندی: آموزش کاربردی » CSS
related مطالب بیشتر:
» حذف اسکرول افقی (horizontal scroll) با css
» آموزش استفاده از فونت فارسی در وب با CSS
» ساخت بلاک شناور عمودی با CSS
» چسبیدن فوتر قالب به پائین صفحه با CSS
» تنظیم موقعیت و حذف فاصله بلاک های div با استفاده از css
commentنظرات (۳۵ یادداشت برای این مطلب ارسال شده است)
نویسنده: مهدی
زمان: ۲۲:۱۵:۵۷ - تاریخ: ۱۳۹۱/۱۲/۰۶
دمتون گرم ، جالب بود
نویسنده: m71
زمان: ۱۸:۱۶:۲۳ - تاریخ: ۱۳۹۱/۱۲/۲۱
بسیار عالی
نویسنده: رها
زمان: ۱۷:۲۶:۱۶ - تاریخ: ۱۳۹۲/۰۳/۱۴
سلام
خسته نباشید
چطور میشه در html یه جزء رو با یه نام و یه کلاس چندبار تکرار کنیم بعنوان مثال:
div class=box
div class=box
div class=box
div class=box
اما در عرض مثلا 1200 هر چهار box نمایش داده بشه اما در عرض مثلا 800 سه تا box باشن
چنین امکانی تحت مدیا فکر میکنم قبلا فرمودید تعریف میشه اما چگونگی مخفی کردن یه عنصر در عرض متفاوت به چه شکلی هستش ؟
با تشکر وارزوی توفیق
اگه راه حلی هست و براتون مقدوره ممنون میشم راهنمایی کنین
پاسخ: 
سلام
این موضوع و پیدا کردن شیوه ای سازگار با تمام مرورگر ها مبحثی مفصل و جداگانه دارد که پیش تر تحت عنوان قالب های Responsive به آن اشاره کردیم، خلق صحیح این ویژگی پیش از هر چیز نیازمند داشتن تجربه اولیه در قالب های معمولی و کار با خصوصیات متعدد CSS مانند display، position، max-width و... است (شروع طراحی قالب به صورت Responsive به جهت پیچیده گی بیشتر، ایده خوبی نیست!)، سپس می توانید از media در CSS3 استفاده کنید که آموزش های خاص خود را دارد.
نویسنده: میلاد زلفی
زمان: ۰۱:۵۸:۵۰ - تاریخ: ۱۳۹۲/۰۴/۰۹
با سلام؛
آیا از این روش می توان برای مخفی کردن نمایش "اسکریپت آمارگیر از سایت وبگذر" استفاده کرد؟ در صورت امکان آیا خللی در فرآیند آمارگیری ایجاد می شود؟
بی نهایت ممنون...
پاسخ: 
سلام
امکان استفاده وجود دارد و هیچ خللی از این جهت به ابزار مورد نظر وارد نمی شود.
نویسنده: میلاد زلفی
زمان: ۲۳:۴۹:۴۲ - تاریخ: ۱۳۹۲/۰۴/۱۲
با سلام؛
آیا می توان از روش فوق برای مخفی سازی کلمات کلیدی که برای بهینه سازی وبسایت به کار برده می شوند، در حالی که (برای آلایش بهتر صفحه وب) این کلمات از دید کاربر مخفی هستند، استفاده کرد؟
خلاصه این روش تأثیری در روند بهینه سازی ایفا می کند؟
ممنون از سایت بی نظیرتون...
پاسخ: 
سلام
توصیه نمی شود کلمات کلیدی را با روش های اینچنین مخفی کنید، هر چند اثبات نشده اما به نظر استفاده زیاد مخصوصا در هنگامی که تگ های h1 و... مخفی می شوند، توسط موتورهای جستجو شناسایی شده و امتیاز منفی و حتی حذف از لیست جستجو را در پی دارند (به دلیل مشکوک به تقلب بودن)، این روش ها صرفا باید برای موارد ضروری و به تعداد اندک استفاده شوند، برای کلمات کلیدی بهتر است با CSS اندازه آنها را استاندارد کنید یا در کل طوری سایتتان را طراحی کنید که نیاز به جمع کردن کلمات کلیدی در یکجا نباشد! (صرف قرار دادن چندین کلمه کلیدی کمکی به سئو سایتتان نمی کند، مهم تر از آنها وجود محتوای خوب است).
نکته: از میان روش های آموزش داده شده، روش position absolute و left از نظر سئو استانداردتر است.
نویسنده: razetarikh
زمان: ۰۰:۰۷:۱۶ - تاریخ: ۱۳۹۲/۰۴/۲۸
سلام من که چیز زیادی دست گیرم نشد میخواهم تگ ها
h1 ... h6
را مخفی کنم
به وسیله این دستور روش position absolute و left
میشه کد کامل بنویسی با تگ ممنون میشم
پاسخ: 
سلام
از نمونه کد زیر استفاده کنید:
<style type="text/css">
.accessible{
position:absolute;
left:-9999px;
top:auto;
width:5px;
height:5px;
overflow:hidden;
}
</style>
<h1 class="accessible">متن مخفی شده</h1>
نویسنده: razetarikh
زمان: ۲۱:۳۷:۰۸ - تاریخ: ۱۳۹۲/۰۴/۲۸
اوکی ممنون
دست درد نکنه
سایت عالی دارید
اگر ممکنه نظرتون درباره سایت من بگویید
نویسنده: razetarikh
زمان: ۲۳:۵۵:۳۴ - تاریخ: ۱۳۹۲/۰۴/۲۸
سلام اگر ممکنه کد ساعت و تاریخ که سمت چپ بالا سایت هست
من هر چی گشتم همچین کدی ندیدم ممنون میشم برای من بگذاری
پاسخ: 
سلام
کد مورد نظر به زبان PHP است، در حالی که ظاهرا سایت شما از خدمات بلاگفا (بر روی دامنه شخصی) استفاده می کند، لذا قابلیت پشتیبانی از PHP را ندارد، باید به دنبال ابزارهای رایگان یا کدهای جاوا اسکریپتی باشید.
نویسنده: علی
زمان: ۰۸:۲۰:۲۸ - تاریخ: ۱۳۹۲/۰۶/۰۳
می خواهم در فرم ورود اطلاعات از خاصیت مخفی و نمایش یک div استفاده کنم یعنی وقتی کاربر روی یک دکمه کلیک کرد اطلاعات براش نمایش داده بشه به چه شکل میشه انجام داد
با تشکر
پاسخ: 
این مورد باید با جاوا اسکریپت انجام شود، مثال:
<script type="text/javascript">
function ShowText(input, div){
var value = document.getElementById(input).value;
document.getElementById(div).innerHTML = value;
}
</script>
<input type="text" id="your-input">
<input type="button" value="کلیک" onclick="ShowText('your-input', 'your-div');">
<div id="your-div"></div>
نویسنده: ضحی
زمان: ۲۱:۲۰:۲۰ - تاریخ: ۱۳۹۲/۱۱/۰۸
با سلام و خسته نباشید.
من می خوام مدیر سایت و کاربر عادی از یک قسمت لاگین استفاده کنند اما پنل مدیریت رو فقط مدیر سایت ببینه.
در عین حال مدیر سایت همه کارهای مربوط به کاربر رو هم بتونه انجام بده.
اگه توی ستون کناری که به فایل اصلی include می کنم این کار رو انجام بدم مجبورم دو برابر صفحه ایجاد کنم یعنی تمام صفحات با ستون کناری بدون پنل برای کاربران عادی و دوباره تمام صفحات برای کاربران با ستون کناری که پنل داره.
میشه راهنمایی کنید که چه کاری انجام بدم؟
پاسخ: 
سلام
انجام این مورد در صورتی که به اندازه کافی تجربه کار با توابع مربوط به session و همچنین آرایه ها و توابع عمومی PHP را نداشته باشید، کمی دشوار است، به طور مثال می توانید یک ستون به عنوان سطح دسترسی کاربر ایجاد کنید و قسمت مربوط به مدیر را با یک دستور شرطی include کنید، به فرض:
<?php
if($permission == 'Admin'){
include_once('admin_panel.php');
}
?>
در اینجا مقادیر Admin باید از ستون مربوطه در دیتابیس استخراج شده باشد و اگر برابر عبارت فرضی Admin بود، فایل قسمت پنل به خروجی اضافه می شود (البته برای حالت کاربردی باید موارد دیگری را نیز رعایت کنید که این موارد تنها با داشتن تجربه های قبلی بدست می آیند).
نویسنده: سئو
زمان: ۱۶:۳۲:۱۳ - تاریخ: ۱۳۹۳/۰۱/۰۹
ممنون بسیار کاربردی بود
نویسنده: مهدی
زمان: ۰۰:۴۲:۱۳ - تاریخ: ۱۳۹۳/۰۳/۰۱
آقا دمت گرم خیلی ممنون
نویسنده: محسن
زمان: ۱۴:۰۸:۳۴ - تاریخ: ۱۳۹۳/۰۳/۲۸
با عرض سلام
اينجانب نياز دارم كه براي خودكار نمودن يكسري محاسبات، به سورس سايتي دسترسي داشته باشم. در حالتي كه بر روي سايت كليك راست نموده و گزينه ديدن سورس سايت را مي زنم، به اطلاعات كامل سايت با تكست باكس هايي كه توسط كاربر پر شده، دسترسي دارم. ولي هنگامي كه توسط برنامه نويسي مي خواهم به محتويات سايت دسترسي داشته باشم، متاسفانه اطلاعات پر شده در تكست باكس ها كه توسط كاربر پر شده اند در سورس سايت ديده نمي شود.
آيا مي توان كدي به انتهاي سايت مورد نظر اضافه كرد كه در صورت گرفتن محتواي سورس سايت، تمامي اطلاعات توسط برنامه نويسي در اختيارمان قرار گيرد؟
با تشكر
پاسخ: 
سلام
پاسخ کوتاه: خیر!
توضیح: اگر به سایت مورد نظر دسترسی مدیریتی دارید، می توانید به روش دیگری اطلاعات را از سمت کاربر به سرور ارسال کنید، به طور مثال با Ajax، در غیر این صورت نمی توان از سمت سرور اطلاعات صفحه مرورگر را دریافت کرد، مگر اینکه کاربر فرم را پر و ارسال نماید.
نویسنده: الهام
زمان: ۰۰:۲۷:۴۱ - تاریخ: ۱۳۹۳/۱۰/۱۲
سلام، من يه سوال درباره مخفی كردن تگ مطلب داشتم... من دوست ندارم تگ های مطالبم در زير مطالب مشخص باشه و پنهانشون كردم... در اينصورت از ديد رباتهای جستجو كه پنهان نميشه درسته؟ ممنون ميشم جواب بدين...
پاسخ: 
سلام
اگر با CSS یا JavaScript باشد، خیر! اما پنهان کردن محتوای حاوی لینک در وب از نظر SEO توصیه نمی شود و ممکن است باعث مسدود شدن وبلاگ شما در موتورهای جستجوگر شود، توصیه می کنیم اگر واقعا به برچسب ها نیازی ندارید، به طور کامل آنها را از خروجی وبلاگ حذف کنید.
نویسنده: ali
زمان: ۱۳:۱۸:۵۳ - تاریخ: ۱۳۹۳/۱۰/۱۲
سلام خسته نباشید.
من یه فرم دارم که کاربر یه سری اطلاعات رو باید وارد کنه و وقتی دکمه جستجو رو میزنه اطلاعاتی که از دیتابیس میاورد رو داخل یک div که در ابتدا مخفی است نمایش دهد.
این کار با یک دکمه معمولی امکان پذیر است ولی چون دکمه من از نوع submit است، وقتی کلیک می شود یه لحظه div مورد نظر میاد و میره، رو صفحه نمیمونه. چطور میشه که با زدن دکمه submit مثل یه دکمه معمولی div رو صفحه بمونه و اطلاعات من رو نشون بده؟
ممنون میشم کمکم کنید
پاسخ: 
سلام
برای این کار باید از Ajax استفاده کنید، همچنین در تگ form در رویداد onsubmit باید تابع خود را به صورت نمونه زیر تنظیم کنید:
<form action="#" method="post" onsubmit="return ajaxFunc();">
در تابع نتیجه سرور را در بلاک div چاپ کرده و در نهایت
return false;
را برگردانید تا فرم ارسال نشود.
paged صفحه 1 از 3




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

3 × 1
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...