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

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

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

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

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

ساخت منوی کشویی با تگ ul li و css

همانطور که می دانیم، امروزه از کدها و استایل های css علاوه بر کاربرد های معمول و روزمره، برای خلق جلوه های خاص در بستر وب، استفاده های زیادی می شود، یکی از این جلوه ها که محبوبیت زیادی نیز بین طراحان وب دارد، خلق منوهای کشویی (بازشونده) یا به اصطلاح drop down مبتنی بر تگ های ul li و css است، به این صورت که لیستی از منوها با قابلیت داشتن زیر مجموعه که تنها هنگام بردن ماوس روی آنها، ظاهر می شوند و با خارج کردن ماوس، مجددا به طور خودکار محو می شوند؛ نوع پیشرفته تر این منوها با جاوا اسکریپت یا جی کئوری (jQuery) نیز وجود دارد که البته یک قاعده نانوشته در وب می گوید هر چه قدر ظرافت و جلوه های ویژه کار افزایش یابد، به همان نسبت از سازگاری کم می شود، به هر صورت در این آموزش می خواهیم با نحوه ساخت منوهای کشویی یا به عبارتی بازشونده، مبتنی بر تگ ul li و css آشنا شویم.

چرا از ul li استفاده کنیم؟

اینکه چرا باید برای ساختن منوهای بازشونده از تگ ul li استفاده کنیم به این علت است که در درجه اول این نوع منوها از لحاظ موتورهای جستجو به راحتی قابل فهم و ایندکس شدن هستند که به اصطلاح به آنها Search Engine Friendly گویند، از طرفی برای کاربرانی که به هر دلیل از استایل css نمی توانند استفاده کنند (screen readers)، وجود منوهای مبتنی بر تگ های ul li باعث می شود که علی رغم غیر فعال بودن استایل css، همچنان منوها به صورت دسته بندی شده و زیرمجموعه ای قابل روئیت و استفاده باشند؛ دلیل دیگر نیز می تواند اصولی تر بودن کدنویسی باشد، در html مبحثی تحت عنوان semantic یا معنایی وجود دارد که به طور خلاصه مفهوم آن، استفاده ی به جا از تگ ها است، مثلا برای ایجاد لیستی از آیتم ها، تگ ul li کاربرد دارد و نباید از موارد مشابه که فلسفه ای متفاوت دارند، استفاده شود.

ساخت چارچوب کار با html

ساخت منوی آبشاری (عمودی) با تگ ul li و css

در مطالب قبلی از بخش آموزش های کاربردی، با نحوه ساخت چند نوع منوی متفاوت مبتنی بر css و تگ های ul و li آشنا شدیم، همچنین به ضرورت استفاده از تگ های استاندارد ایجاد کننده لیست در html و اهمیت آنها برای موتورهای جستجو و نیز بالابردن قابلیت کاربری (accessibility) صفحه وب، اشاره کردیم، این بار در ادامه آموزش ها، می خواهیم با نحوه طراحی و ایجاد منوی آبشاری یا عمودی (vertical) با تگ ul li و استفاده صرف از css آشنا شویم، از نقاط قوت این منو سازگاری با زبان فارسی و نمایش یکسان در مرورگرهای مختلف و در عین حال سبک و کم حجم بودن آن است، البته ناگفته نماند که تمام امکانات این منو در مرورگر اینترنت اکسپلورر نسخه 6 قابل استفاده نیست.

ایجاد چارچوب کار با html و تگ ul li

ساخت بلاک شناور عمودی با CSS

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

استایل CSS برای ایجاد منوی شناور

حذف اسکرول افقی (horizontal scroll) با css

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

چرا اسکرول افقی در صفحه یا بلاک div ایجاد می شود؟

علت عمده این مشکل به تعریف نادرست یا ناهماهنگ عرض اِلمان های صفحه یا بلاک div مربوط می شود، مثلا اگر بلاکی با پهنای 200 پیکسل را در بلاکی دیگر با عرض 190 پیکسل قرار دهید (به صورت تودرتو (nested) یا آشیانه ای)، مسلما در حالت عادی با مشکل اسکرول افقی و نواری آبی رنگ در زیر آن مواجه خواهید شد، یا اگر در اسکلت بندی قالب سایت یا وبلاگ خود، عرض زیادی برای چارچوب کار در نظر بگیرید که این عرض از اندازه صفحه نمایش کاربران بیشتر باشد، مرورگر به صورت خودکار اسکرول افقی را نشان خواهد داد.

چسبیدن فوتر قالب به پائین صفحه با CSS

امروزه طراحی قالب وب (سایت، وبلاگ و...) بدون سر و کار داشتن با استایل نویسی CSS امری تقریبا غیر قابل تصور است، از این گذشته حتی آنهایی که در این باره تجربه اندکی دارند نیز به خوبی واقف هستند که صرف آشنایی با خاصیت ها و کارکردهای عادی کدهای CSS، جوابگوی تمام نیازها و ایده های طراح قالب نخواهد بود، از این رو همیشه مواردی پیش می آید که پا را از قواعد ساده CSS فراتر گذاشته و با تکنیک های ویژه آن کار کنیم، به هر صورت با ذکر این مقدمه در این آموزش می خواهیم یک تکنیک جالب در طراحی وب را با هم مرور کنیم و آن آشنایی با نحوه به اصطلاح چسباندن فوتر قالب به پائین صفحه با CSS است.

منظور از چسباندن فوتر به انتهای قالب

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

کدنویسی HTML و CSS

تنظیمات css مخصوص مرورگر اینترنت اکسپلورر

شاید به عنوان یک کاربر در دنیای وب، هر روز به سایت ها و وبلاگ های مختلفی سر بزنیم و بیش از هر چیز، رسیدن به محتوای مورد نظر برایمان مهم باشد، فارغ از اینکه ظاهر یک سایت چگونه است و چه معایب و محاسنی دارد، مطلبمان را می خوانیم و در آخر هم آن صفحه را ترک می کنیم، در حالی که برای مدیران حرفه ای وبسایت ها و وبلاگ ها، اینکه همه کاربرانشان بتوانند از محتوای آنها به یک شکل استفاده کنند، اهمیت زیادی دارد، جالب است اگر بدانید که مرورگرهای وب اگرچه از قوانین مشترکی پیروی می کنند، اما هر کدام در نحوه تفسیر این قوانین ساز خودشان را می نوازند، البته هرچه که پیش تر می رویم، سازگاری مرورگرها و یکسان سازی آنها نیز بیشتر می شود، اما دردسر همیشگی طراحان وب یعنی مرورگر اینترنت اکسپلورر (Internet Explorer) در این بین سرآمد مرورگرهای غیر استاندارد است، به همین دلیل شرکت مایکروسافت (خالق و مالک این مرورگر) که گویا از شاهکار خود اطلاع داشته، برای تنظیم استایل css مخصوص مرورگر خود (در نسخه های مختلف)، قابلیتهایی تحت عنوان پیام های شرطی یا (Conditional Comments) و هک هایی ویژه پیشنهاد داده است که بد نیست نگاهی به آنها بیندازیم.

چرا باید تنظیمات مخصوص مرورگر اینترنت اکسپلورر را انجام دهیم؟

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

تنظیم موقعیت و حذف فاصله بلاک های div با استفاده از css

اگر یک طراح وب تقریبا حرفه ای یا لااقل علاقمند به طراحی قالب شخصی برای وبلاگ یا سایت خود باشید، حتما با کدهای css آشنا هستید و بارها از آن در شکل دهی فرم و ظاهر صفحات  استفاده کرده اید؛ اگرچه نمای کلی کار با css چندان پیچیده نیست ولی جزئیات و ریزه کاری ها همیشه باعث می شوند که نکاتی هرچند ساده، به نظر مبهم و حل نشده باقی بمانند، به همین خاطر در این مطلب یکی از شایع ترین این موارد را با هم مرور خواهیم کرد و آن تنظیم فاصله بلاک ها و لایه های div از حاشیه صفحه و همچنین قرار دادن آن در وسط (center) به کمک css است.

خاصیت هایی که برای وسط (center) قرار دادن، ایجاد یا حذف فاصله (حاشیه) به آنها نیاز داریم margin و padding هستند.

حذف حاشیه بلاک با استفاده از css

آموزش استفاده از فونت فارسی در وب با CSS

یکی از قابلیت های خوب افزوده شده به CSS در نسخه 3، امکان استفاده از فونت هایی است که پیش از این تنها در سیستم عامل کاربران قابل نمایش و استفاده بودند، چرا که در وب به طور معمول تنها فونت های خاصی که در تمام سیستم عامل ها نصب و قابل اجرا هستند، پشتیبانی می شود و بقیه موارد به صورت پیش فرض (به طور مثال با فونت Arial) نمایش داده خواهند شد، از این رو توسعه دهنده گان CSS، به فکر راه حل این مشکل افتادند تا اینکه در نسخه سه خاصیتی با نام font-face@ معرفی شد، البته در ادامه خواهیم دید که استفاده از این خاصیت آنچنان هم به سادگی حالت معمول تعریف یک فونت نیست و به اصطلاح ریزه کاری هایی دارد.

مزایا و معایب استفاده از فونت فارسی در وب

قبل از پرداختن به ادامه آموزش، بد نیست به طور مختصر به مزایا و معایب استفاده از فونت فارسی در وب بپردازیم، همان طور که می دانید فونت های از پیش تعریف شده و استاندارد وب (فونت های امن وب!) برای زبان فارسی محدود به چند نوع (از جمله Tahoma ، Arial و...) است، از این جهت استفاده از سایر فونت ها به دلیل تنوع، زیبایی و کمک به خواناتر شدن مطالب می تواند مفید باشد، اما متاسفانه این کار موجب افزایش حجم کلی صفحه نیز خواهد شد، چرا که اکثر فونت ها معمولا حجمی بیش از 30 کیلوبایت دارند و این در مجموع باعث کندتر شدن سرعت بارگذاری صفحات می شود، البته شاید در نگاه اول این اندازه چندان به چشم نیاید، اما وقتی حجم سایر المان ها، استایل ها و فایل های جاوا اسکریپت احتمالی را به آن اضافه کنیم، در مجموع قالب سایت یا وبلاگ به اصطلاح سنگینی از لحاظ حجم خواهیم داشت، از طرفی مخصوصا در مورد فونت های فارسی و در برخی مرورگرها، ظاهرا برای کاراکترهای خاصی، هنوز مشکلاتی وجود دارد، لذا توصیه می شود از این قابلیت بر اساس نیاز و با سنجش سایر شرایط گفته شده استفاده شود.

آشنایی با خاصیت font-face@ در css3

ایجاد منوهای زیبا برای سایت یا وبلاگ با استفاده از تکنیک CSS

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

ایجاد منوهای اینتراکتیو با فتوشاپ و css

ایجاد بلاک و تصویر شفاف (transparent) با استفاده از css3

امروزه در طراحی صفحات وب، استفاده از تصاویر شفاف و یا به اصطلاح transparent امری مرسوم است، به طور مثال ممکن است طراحان قالب وبلاگ ها یا سایت ها، در طراحی پس زمینه مطالب، آن را کمی شفاف کنند تا تصویری که در زیر بلاک مطلب قرار دارد به صورت نیمه شفاف دیده شود، استفاده از این تکنیک پیش تر با تصاویر png ممکن بود، اما مشکل همیشگی یعنی مرورگر غیر استاندارد و ضعیف اینترنت اکسپلورر (IE) قادر به نمایش این تصاویر با زمینه شفاف نبود، لذا طراحان وب به فکر جایگزینی برای این تکنیک برآمدند و از جاوا اسکریپت و بعدها css بدین منظور استفاده کردند، در این مطلب قصد داریم نحوه ایجاد تصاویر و بلاک های div شفاف را با css آموزش دهیم.

عنصر استانداردی که در css3 برای ایجاد لایه های شفاف تعریف شده، opacity نام دارد که به معنی تاری و کدری است، البته برای مرورگرهای قدیمی تر که از css3 پشتیبانی نمی کنند باید از مقادیر دیگری تحت عنوان ms-filter، filter، moz-opacity و khtml-opacity استفاده کنیم.

ایجاد بلاک و تصور شفاف با عنصر opacity در css3: