۵+۱ خصوصیت کاربردی زبان CSS و HTML

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

۱- استفاده از کاراکتر * در CSS

هماهنگی نمایش یکسان قالب در مرورگرهای مختلف (مخصوصا نسخه های قدیمی تر مرورگر Internet Explorer) یکی از قسمت های زمان گیر برای توسعه دهندگان وب است. همچنین در بعضی از مواقع راه بهتری جز استفاده از دستورات CSS به ازای هر مرورگر نیست. در صورتی که دستورات CSS مربوط به قالب طراحی شده برای نسخه های قدیمی Internet Explorer کم بوده و نیاز به ایجاد فایل CSS جدید به ازای هر کدام ندارید، می توانید از روش زیر استفاده کنید.

input.SearchBox {
    height: 16px;
    *height: 14px;
}

در تکه کد بالا خصوصیت height دو بار استفاده شده است. طبق روال عادی در صورتی که کدی دو بار استفاده شده باشد، آخرین تعریف آن درنظر گرفته می شود ولی با توجه به استفاده از کاراکتر * قبل از تعریف دوم، مرورگر ۸ Internet Explorer عدد ۱۴ پیکسل را در نظر گرفته ولی سایر مرورگر ها همچنان عدد ۱۶ پیکسل را درنظر می گیرند.
نکته: برای استفاده از این روش، تکه کد زیر را به تگ هد صفحه اضافه کنید.

<meta http-equiv=”X-UA-Compatible” content=”IE=7″ />

۲- دستور important!

در صورت نیاز به اولویت بندی دستورات CSS از این دستور استفاده کنید. این روش کاربرد های زیادی دارد. مثلا در صورتی که رنگ متن دکمه ای از قبل سفید تعریف شده باشد و درجایی دیگر شما نیاز به استفاده از همان دکمه با رنگ متفاوت داشته باشید، می توانید از تکه کد زیر استفاده کنید.

button { color: red !important; }
button { color: black; }

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

۳- خصوصیت before: و after:

با استفاده از خصوصیت before: و خصوصیت after: می توانید قبل و بعد از اجزای صفحه محتوای مدنظر خود را قرار دهید. به مثال زیر توجه کنید.

.title-icon {
    background: url(“title-icon.png”) no-repeat;
    height: 16px;
    width: 16px;
    display: inline-block;
}

HTML Tag:
<i class=”title-icon”></i><span>تعداد بازدید:۱</span
>

sec-3

تصویر ۱

با استفاده از خصوصیت before: برای تگ span دیگر نیازی به استفاده از تگ i و کدهای بیشتر نیست.


span:before {
    content: “”;
    background: url(“title-icon.png”) no-repeat;
    height: 16px;
    width: 16px;
    display: inline-block;
}

<span>عنوان</span>

sec-3

تصویر ۲

مشاهده می کنید که در هر دو روش خروجی یکسان نمایش داده می شود. برای اطلاع از پشتیبانی مرورگرها از این دستور به آدرس زیر مراجعه کنید.

css-tricks.com/browser-support-pseudo-elements

۴- خصوصیت z-index

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

sub-menu-0

تصویر ۳

بعد از اعمال تغییرات زیر مشکل نمایش زیر منو برطرف خواهد شد.


.main-menu {
    z-index: 2;
}


.slider {
    z-index: 1;
}

sub-menu-1

تصویر ۴

۵- خصوصیت vertical align

در قسمت ۳ با استفاده از خصوصیت before: در کنار تگ span یک تصویر قرار داده شد. برای تنظیم تراز تصویر و متن داخل span راه های مختلفی وجود دارد از جمله استفاده از خصوصیت margin و padding، خصوصیت vertical align تنظیم تراز اجزای صفحه را به راحتی برای شما انجام می دهد.

span:before {
    content: “”;
    background: url(“title-icon.png”) no-repeat;
    height: 16px;
    width: 16px;
    display: inline-block;
    vertical-align: middle;
}

۶- استفاده از [] در نام گذاری عناصر فرم

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

<input type=”file” name=”file1″/>
<input type=”file” name=”file2″/>

در تکه کد بالا برای هر یک از عناصر فایل نام متفاوتی انتخاب شده است، که در این صورت برای استفاده از مقدار هر کدام در سمت سرور می بایست از نام عنصر مربوطه استفاده کرد. راه آسان تر برای دریافت مقادیر عناصر فایل، استفاده از یک نام به ازای تمامی عناصر از یک نوع و قرار دادن [] در انتهای نام انتخاب شده می باشد. در این صورت بعد از ارسال فرم در سمت سرور آرایه ای از عناصر فایل با نام filesArray قابل دسترس خواهد بود.

<input type=”file” name=”filesArray[]”/>
<input type=”file” name=”filesArray[]”/>

نظر خود را ارسال کنید:

ایمیل شما منتشر نخواهد شد.