(--(: ترفندهای HTML & CSS :)--!)

شفافیت به گونه ای که در تمام مرورگر ها کار کند
گرچه CSS 3 خاصیت جدید opacity را برای شفافیت معرفی کرده است، اما همه ی مرورگرها از آن پشتیبانی نمی کنند. این یک ترفند CSS برای شفافیت در همه ی مرورگرها می باشد

کد:

.transparent_class { 
  filter: alpha(opacity=50); 
  -moz-opacity: 0.5; 
  -khtml-opacity: 0.5; 
  opacity: 0.5; 
} 

 

حذف اسکرول عمودی در textarea ها در IE
مرورگر Internet Explorer بدون توجه به ارتفاع متن، یک اسکرول عمودی به کادر های متنی textarea اضافه می‌کند. با استفاده از روش زیر می توانید مشکل فوق را برطرف نمایید

کد:

textarea{
  overflow: auto;
}

 

حذف حاشیه از لینک های فعال
برخی از مرورگر ها مانند فایرفاکس و IE دور لینک هایی که کاربر کلیک می کند، یک حاشیه ی نقطه چین نمایش می دهند. این یک ویژگی مفید است و به این ترتیب، کاربر می تواند بفهمد که روی کدام لینک کلیک کرده است و یا در حال حاضر فوکوس بر روی کدام لینک قرار دارد. با این حال، این ویژگی گاها باعث زشت شدن لینک می شود. برای حذف این حاشیه می توانید از کد زیر استفاده کنید:

کد:

a:active, a:focus {
  outline: none;
}

 

جلوگیری از مخفی شدن عناصر در IE
گاهی اوقات مرورگر IE به شیوه ی خاصی رفتار می کند و سبب می شود که برخی عناصر مخفی شوند. و هنگامی که با موس چیزی را انتخاب می کنیم، مجددا عناصر مخفی شده، ظاهر می شوند. این مشکل به سبب برخی باگ ها در IE به هنگام برخورد با عناصر شناور (float) به وجود می‌آید. این مشکل با افزودن دستور position: relative به عناصری که مخفی می شوند، قابل حل می باشد.

 

آیکون های خاص بر اساس خواص
انتخاب گرهای خواص در CSS بسیار قدرمند هستند و به شما امکانات زیادی را برای کنترل استایل عناصر متفاوت می دهند. به عنوان مثال شما می توانید بر اساس مقدار href در لینک ها (یا به عبارت دیگر، بر اساس مقصد لینک ها)، یک آیکون متفاوت را در سمت چپ لینک ها قرار دهید.
به این روش شما می توانید آیکون های متفاوتی را به لینک هایی که به یک فایل pdf یا یک فایل word اشاره می کنند انتساب دهید و کاربر قبل از این که کلیک کند، می داند که مقصد این لینک، فایل pdf است یا تصویر است یا ...

کد:

a[href$='.doc'] {
  padding: 0 20px 0 0;
  background: transparent url(/graphics/icons/doc.gif) no-repeat center right;
}

 

نشانگر pointer در CSS
با استفاده از خاصیت cursor می توانید شکل اشاره گر موس را تغییر دهید. مقدار cursor: pointer سبب می شود که اشاره گر موس شبیه دست (مانند لینک ها) بشود.
به عنوان مثال فرض کنید که می خواهیم اشاره گر موس بر روی تمامی عناصری که توسط کاربر قابل کلیک هستند، مشابه لینک ها بشود. در زیر کد CSS برای انجام این کار آمده است:

کد:

input[type=submit], label, select, .pointer {
  cursor: pointer;
}

 

با حروف درشت نوشتن متن
برای این که کلیه ی حروف یک متن با استفاده از حروف بزرگ نمایش داده شود، می توانید از دستور text-transform استفاده کنید. این دستور معمولا برای نمایش دادن عنوان صفحات مفید است.

کد:

text-transform: capitalize;

 

پررنگ کردن فیلد های ورودی متنی
با استفاده از روش زیر می توانید فیلد های متنی که فوکوس را در اختیار دارند را highlight کنیم. البته این روش در IE کار نخواهد کرد

کد:

input[type=text]:focus, input[type=password]:focus {
  border:2px solid #000;
}

 

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

​

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

برای این منظور از تگ <label> استفاده می کنیم. با استفاده از تگ label می توانیم مطمئن شویم که دسترسی پذیری فرم بیشتر خواهد شد. در زیر یک نمونه کد HTML و CSS مربوطه برای ایجاد یک فرم بدون استفاده از جدول آمده است و می توانید از آن به عنوان الگو برای طراحی فرم هایتان استفاده کنید:

کد HTML

HTML:

<form method="post" action="#" >
  <p><label for="username" >Username</label>
    <input type="text" id="username" name="username" />
  </p>
  <p><label for="password" >Username</label>
    <input type="password" id="password" name="pass" />
  </p>
  <p><input type="submit" value="Submit" /></p>
</form

کد CSS

کد:

p label{
  width: 100px;
  float: left;
  margin-right: 10px;
  text-align: right;
}

به خاصیت for در تگ label توجه کنید. for در واقع id ی عنصری است که این label برای آن تهیه شده است. label ها برچسب هایی هستند که برای کادر های متنی و ... در صفحه قرار می گیرند. باید با خاصیت for مشخص کنیم که این label برای کدام عنصر می باشد.

 

دستور کوتاه شده‌ی تنظیم فونت‌ها
برای تنظیم فونت ها در CSS احتمالا تا کنون به طریق زیر عمل می کردید:

کد:

font-weight: bold;

font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif;

اما نیازی به استفاده از کد طولانی فوق نیست، زیرا به سادگی می توانید از کد کوتاه شده ی زیر نیز استفاده کنید:

کد:

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

روش فوق خیلی بهتر است، اما باید فقط به یک نکته توجه کنید که روش فوق فقط وقتی کار خواهد کرد که هر دو خاصیت font-family و font-size را مشخص کنید. مقدار font-family همواره باید در انتهای خط قرار بگیرد و font-size باید دقیقا قبل از font-family قرار بگیرد.
به طور خلاصه می توان چنین نوشت:

کد:

font: FONT-WEIGHT FONT-STYLE FONT-VARIANT FONT-SIZE/LINE-HEIGHT FONT-FAMILY;

نکته ی دیگر این که اگر مقادیر font-weight و font-style و font-variant را مشخص نکنید، مقادیر همه ی این ها به طور پیش فرض برابر normal است.