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

[size=undefined]
۱. ارسال پیام‌های ناخواسته بدون لینک‌های اشتراک
یکی از قانون‌های طلایی بازاریابی ایمیلی این است که پیام خود را به‌ هیچ عنوان برای کسی که به شما اجازه این کار را نداده است، نفرستید؛ چراکه قطعا تمایلی ندارید که ایمیل شما در فولدر اسپم آن فرد قرار گیرد.
اما چگونه می‌توانید تا حد امکان از قرارگیری ایمیل خود در فولدر اسپم افراد جلوگیری کرده و شانس دستیابی ایمیل‌تان به صندوق ایمیل شخص را افزایش دهید؟
بدین منظور بهتر است که تا حد ممکن، از عبارات تاکیدی و تبلیغاتی استفاده نکنید؛ عباراتی نظیر “رایگان”، “با کمترین ریسک”، “اینجا کلیک کنید”، “هم اکنون سفارش دهید” و …، کمتر استفاده کنید، علی‌الخصوص اگر قصد دارید ایمیل خود را به زبان انگلیسی ارسال نمایید.
بهترین راه برای جمع‌آوری یک لیست ایمیل مناسب، قراردادن یک لینک اشتراک در وب‌سایت و یا اپلیکیشن موبایل شرکت‌تان است. با این کار شما برای کاربران‌تان این امکان را فراهم می‌کنید که تنها در صورت تمایل، ایمیل‌شان را وارد کرده و ایمیل‌های شما را دریافت کنند.
از دیگر راهکارهای جمع‌آوری ایمیل‌ها که تحت عنوان جمع‌آوری سرنخ (Lead Generation) مطرح می‌گردد، می‌توانیم به تبلیغات کلیکی اشاره کنیم که با هزینه مناسب نیز شما را در مسیر جمع‌آوری ایمیل مخاطبان هدفتان یاری می‌کند.
همچنین یکی از نکات ارزشمند بازاریابی ایمیلی این است که حق عدم اشتراک نیز برای کاربران‌تان فراهم کنید. شما به‌خوبی می‌توانید این کار را از طریق یک لینک عدم اشتراک در ایمیل‌های خود، به انجام برسانید.
۲. انتخاب عناوین نامناسب برای ایمیل
یکی از حیاتی‌ترین بخش‌های ایمیل شما، بخش عنوان آن است. عنوان مناسب برای ایمیل‌های شما بهتر است دارای ویژگی‌های زیر باشد:
عنوان را ساده بنویسید. لحن آن خبری باشد و اطلاعاتی را به کاربر برساند و در نهایت نیز عنوان خود را به‌گونه‌ای انتخاب کنید تا ارزش بازشدن را داشته باشد. همچنین توجه داشته باشید که به عنوان خود زرق و برق اضافه نداده و یا آن را گمراه کننده ننویسید.
[/size]
[size=undefined]
۳. ارسال ایمیل بدون تقسیم‌بندی‌های هدفمند
یکی از اصلی‌ترین راه‌های از دست دادن مشتری، ارسال ایمیل‌های انبوه برای طیف وسیعی از کاربران، بدون در نظر گرفتن تقسیم‌بندی‌های مناسب براساس علاقه‌مندی‌های کاربران است. شما می‌توانید اعتماد کاربران‌تان را از طریق تقسیم‌بندی مناسب آن‌ها به دست آورده و از لغو اشتراک آن‌ها جلوگیری نمایید.
درحالی‌که اکثر مدیران ارشد بازاریابی شرکت‌ها این تقسیم‌بندی کاربران را در هنگام ارسال ایمیل لحاظ می‌کنند، اما نکته مهم ایجاد یک بازاریابی برد-برد در دیجیتال مارکتینگ است؛ شما می‌توانید برای هر شخص به صورت مجزا و منحصربه‌فرد، پیامی را آماده کرده و برای او ارسال کنید.
بخش‌بندی کاربران از جنبه‌های جغرافیایی، هزینه‌های پرداختی، آمارهای جمعیتی و یا حتی روانشناختی، می‌تواند کمپین‌های بازاریابی ایمیلی شما را کاملا منحصربه‌فرد نماید.
[/size]
[size=undefined]
۴. ارسال ایمیل‌های غیر تعاملی و یا کسل‌کننده
شما تا به اینجا لیست مناسبی از ایمیل کاربران‌تان را جمع‌آوری کرده و آن‌ها را به چند دسته، طبقه‌بندی کرده‌اید. اکنون در این حالت، قدم بعدی چیست؟
اگر تا بدین‌جا همه چیز را به خوبی پیش برده‌اید، اجازه ندهید تا استراتژی بازاریابی شما از فعالیت‌های فرعیلطمه بخورد. ارسال ایمیل به کاربران‌تان بهتر است هر ۱ یا ۲ ماه یک بار اتفاق بیافتد. البته در برخی مواقع ممکن است به دلیل ارائه تخفیف‌های مختلف و یا تبلیغ ویژگی‌های جدیدی که به خدمات/محصولات خود اضافه کرده‌اید، در بازه‌های زمانی کوتاه‌تری نیز، اقدام به ارسال ایمیل کنید.
بهتر است این نکته را نیز به خاطر بسپارید: ارسال تعداد زیادی ایمیل، دقیقا به اندازه عدم ارسال ایمیل به صورت منظم و در بازه‌های زمانی مشخص، بد است.
شما می‌توانید با قراردادن لینک شبکه‌ های اجتماعی در ایمیل‌های خود، قابلیت به اشتراک‌گذاری ایمیل‌هایتان را نیز افزایش دهید.
[/size]
[size=undefined]
۵. ارسال ایمیل بدون انجام تست
اگر قصد دارید ایمیل خود را بدون انجام تست ارسال نمایید، شاید بهتر است اصلا هیچ ایمیلی برای کاربران‌تان ارسال نکنید! انجام تست A/B و یا ارسال دو نسخه از یک ایمیل، می‌تواند راه مناسبی برای دستیابی به یک قالب مناسب برای کمپین‌های آینده شما باشد.[/size]

 

یکی از راه هایی که می توانید برای خلاصه کردن استفاده کنید استفاده از یک فشرده ساز CSS است راه دیگر آموختن خلاصه نویسی این فایل هاست. ولی آنچه مهم است این است که بدانید این فایل ها بسیار مهم هستند چون با لود شدن هر صفحه وب سایت شما فایل CSS مورد نظر هم لود می شود.

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

آموزش : کد زیر را در فایل استایل قالب خود قرار دهید :

توضیح:
- اگر کد بالا را در صفحه ای با فرمت html ذخیره و آن را اجراء کنید، خواهید دید که منوها به صورت خام، دسته بندی شده و زیر مجموعه ای مرتب شده اند.
- برای چینش منوها از بالاترین سطح به منوهای زیر مجموعه، از قابلیت لیست های آشیانه ای یا تو در تو استفاده کرده ایم، نحوه چینش دقیق تگ های ul و li به این صورت، یکی از قسمت های اصلی ساخت لیست منوها است، به صورت ساده ساختار منوی بالا به شکل زیر است:

با درک صحیح این ساختار به ظاهر پیچیده، می توان به هر تعداد منوهای تو در تو ایجاد نمود.

همان طور که می دانیم، کد های html به تنهایی، قدرت چندانی در ایجاد قابلیت های تعاملی ندارند، لذا با استفاده از css و تنظیم ویژگی های display، position و... رفتار مورد انتظارمان را به تگ ها نسبت می دهیم، این کار را در استایل زیر انجام داده ایم.

توضیح:

- position و display دو ویژگی کلیدی هستند که در عملکرد منو، نقش مستقیم بازی می کنند، تغییر مقادیر پیش فرض آنها، می تواند در نحوه نمایش صحیح عناصر تاثیر بگذارد.

- به نحوه تعریف چند کلاس به صورت پلکانی توجه کنید، به فرض تنظیم استایل به صورت زیر در کد بالا، بر روی عناصر منوی زیر مجموعه سطح دوم تاثیرگذار است.

یا به طور مثال اگر به انتهای استایل دقت کنید، قسمت li:hover .vertical-sub-level .vertical-sub-level در حالتی که ماوس را روی منوی سطح بالا می بریم، باعث محو شدن منوی زیرمجموعه سطح دوم می شود.

- قسمت هایی که با یک علامت زیر خط (underline) و ستاره در ابتدای آنها تعریف شده اند، هک css مخصوص مرورگر اینترنت اکسپلورر است تا خاصیت های منو به درستی نمایش داده شوند (علامت _ هک برای اینترنت اکسپلورر نسخه 6 و علامت * هک برای اینترنت اکسپلورر نسخه 7 است).

- به جزء برخی از ویژگی های منو که برای کارکرد صحیح آن ضروری است، سایر موارد مربوط به ظاهر و نمایش محتوا، قابل سفارشی سازی و تغییر است.

یکی از مواردی که در استفاده از این نوع منوها و امکانات تعاملی در وب باید به آن توجه نمود، قابلیت سازگاری با مرورگرهای متفاوت است، اشکال عمده برنامه هایی که تحت عنوان ساخت منو استفاده می شوند نیز همین مسئله است که اکثر منوهای آماده آنها تنها در چند مرورگر به درستی نشان داده می شود یا اینکه برای کارکرد صحیح به حجم زیادی از فایل های جانبی نیازمندند، اما در مورد این منو، تلاش زیادی کرده ایم که بدون استفاده از فایل ها و اسکریپت های جانبی، آن را تقریبا با تمام مرورگرهای استاندارد موجود سازگار کنیم، لذا در عین سادگی و سبکی، قابلیت کاربردی آن تقریبا در تمام مرورگرها (Firefox, Opera, Internet Explorer +6, Google Chrome و...) یکسان است، منتها در مورد مشکل همیشگی طراحان وب یعنی مرورگر اینترنت اکسپلورر نسخه منسوخ 6، به دلیل پشتیبانی نشدن قابلیت hover برای تگ li، زیر مجموعه های این منو در این نسخه از اینترنت اکسپلورر به درستی نشان داده نخواهد شد، لذا بهترین گزینه در چنین شرایطی، به اصطلاح ایمپورت استایل خاص برای این مرورگر است یا اینکه به بازدیدکننده خود که از این مرورگر قدیمی و آسیب پذیر استفاده می کند، پیامی مبنی بر پشتیبانی نشدن امکانات سایت توسط مرورگر او نشان دهیم، به طور مثال با دستور شرطی زیر می توان این کار را انجام داد:

کد نهایی منوی عمودی با css و تگ ul li و همچنین پیش نمایش آنلاین آن را جهت تست و بررسی در زیر قرار داده ایم که می توانید از آن استفاده کنید.

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

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

ابتدا قبل از پرداختن به کدنویسی css، چارچوب کار و منوهای خود را مبتنی بر ul li در html به صورت زیر می نویسیم، البته کد زیر صرفا جهت نمونه آورده شده است و شما می توانید با توجه به نیاز خودتان آن را ویرایش کنید.

توضیح:

- به نحوه قرار گرفتن منوها، به صورت تگ های ul li در حالت تو در تو دقت کنید.

- همانطور که ملاحظه می کنید، ابتدا یک بلاک با آی دی فرضی main-menu ساخته ایم که درون خود یک تگ ul اصلی با زیرمجموعه هایی به صورت li ul li دارد.

- در تگ های ul سطح دو، از کلاس sub-menu استفاده کرده ایم که در ادامه نحوه تنظیم ویژگی های آن را خواهیم دید.

پس از اینکه اسکلت بندی کار را ساختیم، نوبت به تعریف کلاس و آی دی css می رسد، همانطور که ملاحظه می کنید، در کد بالا یک آی دی و یک کلاس به کار رفته است (آی دی main-menu و کلاس sub-menu)، لذا قسمت عمده کار ما، تنظیم این دو عنصر خواهد بود، در استایل زیر این کار را انجام داده ایم و علاوه بر دو عنصر نام برده، موارد عمومی مثل فونت صفحه، رنگ و حالت لینک ها و... را نیز تنظیم کرده ایم:

توضیح:

- مقادیر مربوط به body و a به صورت کلی، ویژگی های صفحه را تعریف می کنند.

- مقادیر position در آی دی main-menu باید به صورت relative یا نسبی تعیین شود.

- در قسمت main-menu li به این جهت از float و مقادیر right استفاده کرده ایم که منو ها در کنار هم در یک سطح و از راست به چپ قرار بگیرند.

- به نحوه تعریف استایل برای تگ های زیرمجموعه ای در کد بالا دقت کنید، مثلا تعریف به صورت main-menu li ul a بر روی عنصر ul که خود زیر مجموعه li است و li نیز داخل بلاک div با آی دی main-menu قرار دارد، در حالت لینک، اثر گذار است.

- کلیه مقادیر مربوط به رنگ های پس زمینه، با توجه به سلیقه شما قابل تغییر است و از این لحاظ مشکلی نخواهد بود.

- عنصر z-index برای قرار گرفتن لایه مربوط به لینک منوها، در بالاترین سطح است، هرچه عدد z-index بیشتر باشد، آن لایه بالاتر از سایر عناصر در صفحه نشان داده می شود.

- قسمت مربوط به clear و مقادیر both برای قرار گرفتن صحیح منو، داخل بلاک main-menu لازم است.

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

با استفاده از خاصیت display و مقادیر none و block می توان منوی کشویی را توسعه داده و به هر تعداد منوی زیر مجموعه ایجاد کرد، به طور مثال با افزودن ویژگی های css زیر به استایل منو، این کار را برای ایجاد منوهای زیر مجموعه سطح دوم انجام می دهیم.

توضیح:

خاصیت display با مقادیر none در تکه کد اول، برای حالتی است که تگ li اول در حالت فعال است (یعنی کاربر ماوس را روی یکی از منوهای اصلی می برد)، لذا تگ ul در دو سطح پائین تر از li (یعنی همان ul که منوی زیرمجموعه سطح دوl را در خود دارد) باید مخفی باشد.

خاصیت display با مقادیر block در تکه کد دوم، برای حالتی است که تگ li دوم در حالت فعال است (یعنی کاربر ماوس را روی یکی از منوهای سطح اول می برد)، لذا تگ ul دربرگیرنده منوی زیر مجموعه سطح دوم، باید نمایش داده شود.

در زیر کد نهایی منو  را می توانید ملاحظه کنید.

توضیح:
- حالت معمول ایجاد یک پیام در صفحات html استفاده از <-- !--> است، همانطور که می بینید این شرط ها نیز مبتنی بر همین قاعده هستند.
- این دستور به مرورگر اکسپلورر می گوید که باید از مقادیر موجود در آن استفاده کند (در واقع مقادیر موجود در این شرط، تنها برای اینترنت اکسپلورر قابل استفاده است و سایر مرورگرها با آن مثل یک پیام معمولی برخورد می کنند)، جالب است که بدانید درون این شرط می توان هر عبارت یا کدی قرار داد و فقط محدود به ایمپورت استایل css نیست، مثلا می توان به کاربر پیام داد که مرورگر او قدیمی است و باید از مرورگر دیگری استفاده کند و...
- این پیام های شرطی باید بعد از استایل اصلی و پیش فرض (که مخصوص تمام مرورگرها است) ترجیحا در قسمت هِدر و بین تگ های head قرار گیرند.

تنظیمات مخصوص ورژن های مختلف و معنی آنها

در زیر لیستی تقریبا کامل از تنظیمات استایل css مخصوص ورژن های مختلف مرورگر اینترنت اکسپلورر به همراه معنی عبارات آن آمده است.

ایمپورت استایل مخصوص اینترنت اکسپلورر (تمام ورژن ها)

توضیح:
- if به معنی اگر و IE مخفف اینترنت اکسپلورر (Internet Explorer) است.

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن 6

ایمپورت استایل مخصوص اینترنت اکسپلورر ورژن 9

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

هک با عبارت html+*

در این روش یک آی دی یا کلاس را دو بار به صورت عادی و با  html+*  ایجاد می کنند، به عنوان مثال کد زیر دو ویژگی متفاوت برای یک آی دی تعریف می کند، قسمتی که html+* در ابتدای آن قرار دارد، تنها در مرورگر IE 7 پردازش می شود.

روش هک زیر خط یا underline که عنوان صحیح تر آن underscore است برای هک نسخه های مختلف اینترنت اکسپلورر مخصوصا نسخه 6 کاربرد دارد، در این روش در همان آی دی یا کلاس، ویژگی مورد نظر را با یک زیرخط در ابتدای آن تعریف می کنند.

این روش هک هم برای مرورگر اینترنت اکسپلورر ورژن 7 به پائین به کار می رود، که در آن برای عناصر خاص اکسپلورر یک ستاره در ابتدای آنها قرار می دهند.

این شیوه هک هم برای مرورگر اینترنت اکسپلورر ورژن 9 یا 8 و پائین تر به کار می رود، در این روش برای ویژگی خاص اکسپلورر، عبارت 9\ را به آخر آن اضافه می کنند.

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

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

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

همانطور که با css می توان ویژگی های مربوط به پهنای اِلمان مورد نظر را تعریف کرد، می توان با خاصیت های آن، اسکرول ناخواسته را نیز حذف کرد، به طور معمول برای از بین بردن اسکرول (عمودی) از ویژگی overflow به صورت زیر استفاده می شود.

این کد را می توانید در یک کلاس تعریف کنید و آن کلاس را به بلاک یا تگ body (برای از بین بردن اسکرول در کل صفحه) نسبت دهید.

مشکل ناسازگاری overflow-x در برخی از مرورگرهای قدیمی

در برخی از نسخه های مرورگر فایرفاکس ممکن است خاصیت overflow-x به درستی عمل نکند، هرچند بیشتر کاربران از ورژن های به روزتر استفاده می کنند، اما جهت اطلاعات بیشتر، برای این نوع مرورگرها کد بالا را با افزودن مقادیر moz-scrollbars-vertical کامل می کنیم.

حذف اسکرول بار برای textarea

در فرم های html برای عنصر textarea نیز روشی که در بالا توضیح دادیم کاربرد دارد، اما با خاصیت های html نیز می توان اسکرول افقی textarea را در فرمها از بین برد، برای این منظور از wrap و مقدار virtual استفاده کنید.

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

توضیح:

- خط اول کد (width: 100%) برای ورژن های قدیمی مرورگر اکسپلورر (5، 6 و 7) نیاز است (به جای آن می توانید از مقادیر zoom: 1 استفاده کنید).

- مقادیر ms-filter و filter برای ایجاد حالت شفافیت در اینترنت اکسپلورر کاربرد دارد.

- moz-opacity و khtml-opacity برای ورژن های قدیمی مرورگر فایرفاکس (Firefox) و سافاری (Safari) است.

- opacity نیز خاصیتی استاندارد در css3 است.

- مقادیر شفافیت برای مرورگر اکسپلورر به صورت اعدادی بین 0 تا 100 و برای سایر مرورگرها و حالت استاندارد css3، عددی بین 0 تا 1 است.

- به کار بردن این کلاس ممکن است از نظر سیستم های اعتبار سنجی که هنوز خود را با ویژگی های css3 تطبیق نداده اند، موجب نامعتبر تلقی شدن کد css گردد که البته چندان جدی نیست.

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

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

برای حذف حاشیه بین بلاک div  و تگ body کافی است مقادیر margin و padding را برابر صفر قرار دهیم:

توضیح:
- در مثال بالا بلاکی با کلاس فرضی block را بین تگ body ایجاد کرده ایم که حاشیه آن صفر است و برای body نیز از مقادیر margin و padding صفر استفاده کرده ایم.

نحوه تنظیم یک بلاک در وسط صفحه با استفاده از css

تنظیم بلاک ها در سمت چپ یا راست صفحه به کمک عنصر float و مقادیر left,right به آسانی ممکن است، اما مشکل بیشتر کاربران تنظیم یک بلاک div در وسط صفحه است که در تمام مرورگرها نیز یکسان باشد، در مثال زیر این کار را برای لایه ای با کلاس block انجام داده ایم:


توضیح:
- همانطور که در کد ملاحظه می کنید، ما از margin-left و margin-right با مقادیر auto استفاده کرده ایم، با این کار مرورگر بلاک مربوطه را در وسط صفحه تنظیم می کند.
- علاوه بر این شما می توانید با مقادیر margin: 0 auto نیز یک بلاک را در وسط صفحه تنظیم کنید.

توضیح:

- خاصیت display با مقادیر inline-block و همچنین float:right کمک می کنند تا لینک های ما در یک ردیف قرار گیرند.

- حالت menu a یعنی موقعیتی که آی دی menu در حالت لینک قرار دارد.

- حالت menu a:hover به معنی حالتی است که لینک آی دی menu در حالت فعال قرار می گیرد.

- ul و li عناصر ایجاد لیست در صفحات وب هستند و از لحاظ موتورهای جستجو و علم سئو، شیوه ای مناسب برای ساخت منوها محسوب می شوند.

- تغییر تصاویر در حالت عادی و فعال با قابلیت background-position و مقادیر آن صورت می گیرد.

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

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

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

position static

از position با مقادیر static زمانی استفاده می کنیم که بخواهیم یک عنصر به صورت پیش فرض و طبیعی در کنار سایر عناصر موجود در سند HTML پردازش شود، البته این مقدار چندان کاربردی نیست و کمتر استفاده می شود، چون بدون استفاده از آن نیز، عناصر به صورت static پردازش می شوند (مگر اینکه بخواهید خاصیتی که پیش تر به یک عنصر داده شده را دوباره نویسی و به حالت پیش فرض تغییر دهید که به این حالت در اصطلاح override می گویند).

خاصیت float

در کنار خاصیت position که می توان با آن یک عنصر را در راستای محور X ها و Y ها (کل صفحه) شناور کرد، خاصیت دیگری به نام float وجود دارد که برای شناور کردن عنصر در راستای محور X ها (محور افقی) به کار می رود، به فرض اگر بخواهیم یک بلاک به سمت چپ یا راست متمایل باشد، از float با مقادیر left یا right استفاده می کنیم، به مثال زیر توجه کنید.
مثال:

در زیر شرح مختصر مقادیری که float می پذیرد را بررسی می کنیم.

right : از float با مقادیر right زمانی استفاده می کنیم که بخواهیم عنصر (به فرض بلاک div) به سمت راست صفحه متمایل شود.

left : از float با مقادیر left زمانی استفاده می کنیم که بخواهیم عنصر به سمت چپ صفحه متمایل شود.

none : از float با مقادیر none زمانی استفاده می کنیم که بخواهیم مقادیر پیشین مربوط به float را برای یک عنصر دوباره نویسی و خنثی کنیم، در واقع این حالت پیش فرض float است.

نکته 1: در استایل نویسی کاربردی، معمولا مواردی پیش می آید که در کنار استفاده از float ناچاریم از clear با مقادیر both نیز برای همپوشانی بلاک های تو در تو استفاده کنیم.

نکته 2: برای چینش بلاک ها در کنار هم و در یک ردیف افقی، معمولا علاوه بر خاصیت float، از display با مقادیر inline-block نیز استفاده می شود (جهت سازگاری با برخی مرورگرها).

برای آشنایی بیشتر با خاصیت position و float، در زیر مثال و پیش نمایش آنلاین این خاصیت ها را بررسی می کنیم.

نکته: خاصیت های زیرمجموعه display table عبارتند از: table-caption، table-cell، table-column، table-column-group، table-footer-group، table-header-group، table-header-group، table-row و table-row-group که می توانید از آنها برای لایه های درونی استفاده کنید.

display inline

از display با مقادیر inline برای ایجاد عناصر هم سطح استفاده می شود، یعنی لایه هایی که به صورت display inline هستند، در صورتی که فضای کافی برای آنها وجود داشته باشد، در یک خط و در کنار هم نشان داده می شوند، مثال:


نکته 1: اگر مثال بالا را در یک فایل html  ذخیره کرده و در مرورگر اجرا کنید، خواهید دید که سه لایه از نوع display inline در کنار هم در یک سطح قرار گرفته اند، لذا عناصر inline رفتاری مشابه تگ span در html دارند.
نکته 2: فرمت بندی با display inline معمولا تنها برای محتوای خاصی که به صورت عادی باید در یک خط باشند (مانند متن، تصاویر و...) صورت می گیرد، چرا که خاصیت هایی مانند height، width و... در لایه های inline نادیده گرفته می شوند و لذا این مقادیر در طراحی، برای ایجاد بلاک ها یا باکس ها مناسب نیست.

display inline-block

از display با مقادیر inline-block برای ایجاد بلاک های هم سطح و از نوع block استفاده می شود، یعنی یک لایه inline-block با اینکه یک بلاک است، اما به صورت هم سطح پردازش می شود، به این ترتیب می توان در عین استفاده از ویژگی های عناصر block، آنها را به صورت inline نیز نمایش داد، مثال:

نکته: برای سازگاری با تمام مرورگرها، بهتر است در کنار استفاده از inline-block از خاصیت float با مقادیر left یا right نیز استفاده شود.
display inline-table

از display با مقادیر inline-table برای ایجاد لایه های از نوع جدول اما به صورت هم سطح استفاده می شود، در واقع یک عنصر inline-table مشابه table بوده و در عین حال به صورت هم سطح پردازش می شود، مثال:


نکته: خاصیت های زیرمجموعه display inline-table عبارتند از: table-caption، table-cell، table-column، table-column-group، table-footer-group، table-header-group، table-header-group، table-row و table-row-group.

display list-item

از display با مقادیر list-item برای ایجاد بلاک هایی به شکل آیتم های یک لیست در وب استفاده می شود، هرچند این ویژگی چندان پرکاربرد نیست (و بیشتر از تگ های ul و li استفاده می شود)، اما قابلیتی است که در css وجود دارد، مثال:
نکته: برای اینکه علامت های مربوط به آیتم های لیست به درستی نمایش داده شوند، لازم است که بلاک ها از اطراف صفحه، به اندازه مقادیری فاصله داشته باشند (لذا باید از margin استفاده کنید).

display none

از display با مقادیر none برای ایجاد لایه های مخفی در صفحات وب استفاده می شود، بدین معنی که لایه و محتوای درون آن از دید کاربران مخفی می شود، مثال:

نکته: استفاده از display none با استفاده از خاصیت visibility hidden متفاوت است، در هنگام استفاده از display none، لایه به کلی از صفحه حذف می شود (عرض و ارتفاع آن صفر در نظر گرفته می شود)، اما با استفاده از visibility hidden، اگرچه لایه و محتوای آن مخفی می شود، اما جای آن در صفحه باقی می ماند (عرض و ارتفاع آن در صفحه وجود دارد).

در نمونه کد زیر ترکیبی از مقادیر پر کاربرد مربوط به خاصیت display  را ملاحظه می کنید.

توضیح:
- کلاس ها و آی دی تعریف شده در کد بالا، فرضی و با عناوین انتخابی است.
- در استفاده از مقداردهی درصدی نیاز به وجود یک بلاک والد یا دربرگیرنده داریم، به این معنی که تنها عناصر زیر مجموعه (بلاک درونی) می توانند مقادیر درصدی داشته باشد که در واقع درصد از میزان ارتفاع بلاک اصلی حساب می شود، به طور مثال اگر بلاک اصلی 200 پیکسل ارتفاع داشته باشد، بلاکی که درون آن قرار گرفته با ارتفاع 25 درصد، معادل 50 پیکسل (25 درصد از 200 پیکسل) در حالت معمولی ارتفاع خواهد داشت.
در css برای مقدار دهی چند شیوه وجود دارد:
- تعیین مقادیر به پیکسل (picture element)، به فرض 6px، 2px و... (پیکسل ها مقادیری ثابت هستند)، از واحد px بیشتر برای نمایش محتوا در صفحه نمایش (مانیتور) استفاده می شود.
- تعیین مقادیر به Points، به فرض 1pt، 3pt و... (هر pt برابر 1/72 اینچ است)، از واحد pt بیشتر برای کارهای چاپی استفاده می شود.
- تعیین مقادیر به Ems، به فرض 1em، 0.5em و... (هر em برابر با 16 پیکسل و 12 pt است)، به دلیل قابلیت غیر ثابت و مقیاس پذیر (scalable)، این واحد در طراحی صفحات وب برای گوشی های تلفن همراه و دستگاه های مانند آن مناسب است.
- تعیین مقادیر به سانتی متر (CentiMeter)، به فرض 5cm ، 10cm و...، استفاده از این شیوه در وب، چندان مرسوم نیست.
- تعیین مقادیر به درصد (Percent)، به فرض %10 ، %50 و...، در این حالت اندازه بلاک با توجه به اندازه صفحه نمایش، مقادیری متغیر خواهد بود؛ این واحد نیز در طراحی صفحات وب برای گوشی های تلفن همراه و دستگاه های مانند آن مناسب است.
- تعیین مقادیر به صورت خودکار (auto) و حالت وراثتی (inherit) از بلاک والد.

خاصیت width در css

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

توضیح:
- قواعد تعریف خاصیت width دقیقا مشابه با خاصیت height است.
- دقت کنید که در یک کلاس یا آی دی، می توان به فرض برای width آن از یک نوع مقدار دهی و برای height از نوعی دیگر استفاده کرد، به فرض برای عرض از مقدار دهی پیکسلی و برای ارتفاع از مقدار دهی درصدی استفاده کرد و از این لحاظ محدودیتی وجود ندارد.
خاصیت min-height و max-height

در کنار دو خاصیت اصلی height و width، از چند خاصیت زیر مجموعه نیز در این رابطه می توانیم استفاده کنیم، از جمله min-height و max-height، اما اول باید بدانیم که این دو ویژگی چه کاربردی دارند؟
به طور خلاصه min-height حداقل ارتفاع یک عنصر را مشخص می کند، به فرض در حالت پیش فرض مرورگرها هر بلاک را به اندازه محتوایی که در آن وجود دارد، ارتفاع می دهند، اما با تنظیم مقادیر min-height مرورگر حداقل مقادیر ارتفاع را (چه محتوا به اندازه کافی باشد و چه نباشد) برای آن بلاک در نظر می گیرد، اما max-height حداکثر ارتفاع یک عنصر را مشخص می کند، یعنی به فرض اگر میزان محتوا از ارتفاع یک بلاک بیشتر باشد، مرورگر ارتفاع را همچنان ثابت نگه می دارد و ممکن است محتوا در خارج از بلاک نشان داده شود یا اینکه آن بلاک اسکرول گردد، البته این ویژگی معمولا در کنار خاصیت overflow استفاده می شود، overflow رفتار مرورگر در حالتی که محتوا از میزان ارتفاع یک بلاک بیشتر است را تعیین می کند که خود چند مقدار می پذیرد:
- auto، اگر محتوا بیشتر باشد، بلاک اسکرول می شود.
- hidden، محتوای اضافه مخفی می شود.
- scroll، نوار اسکرول ظاهر می شود.
- visible، بدون اینکه بلاک اسکرول شود، محتوا در بیرون از آن نشان داده می شود.
مثال:


یا

کارکرد خاصیت max-width و min-width در قریب به اتفاق موارد مشابه min-height و max-height است که در بالا اشاره شد، با این تفاوت که در اینجا خاصیت بر روی عرض عناصر html تاثیر می گذارد و از این گذشته مقادیر overflow برای width کاربردی ندارد.

مثال:

یا