Javaziez

All About Code

Fungsi !important Pada CSS

Sering kita jumpai code !important pada CSS. Lalu, apa sih fungsi dari !important itu sendiri? Sebelumnya perlu kita ketahui jika pada suatu css, baik itu class, div, ataupun tag, terdapat dua kode css (property css) yang sama, maka kode yang paling bawahlah yang yang digunakan, sedangkan yang di atas tidak digunakan.

/* Contoh terdapat dua kode yang sama pada suatu selector */
.menuatas
{
margin-top: 10px;
margin-top: 7px;
}

Dari kode di atas, maka class menuatas akan memiliki margin-top sebesar 7px.

Biasanya, penggunaan !important digunakan ketika mengatasi masalah bug CSS di browser IE. Sehingga developer sering membuat kondisi jika client menggunakan browser IE. Solusinya :

.menuatas
{
margin-top:10px !important; /* Selain IE */
margin-top:7px; /* Khusus IE */
}

Kode di atas artinya, jika client menggunakan browser selain IE, maka class menuatas memiliki margin-top 10px, dan mengabaikan kode dibawahnya. Akan tetapi, jika client menggunakan browser IE, maka class menuatas memiliki margin-top 7px. Hal ini dikarenakan browser Internet Explorer (IE) TIDAK MENGENAL !IMPORTANT.

Incoming search terms:

5 Responses so far.

  1. Seiji says:

    There seems to be something weird about the title: this atrlcie is on 1.5.1rc1, right? But it’s titled 1.5.0rc1.It’s nice to see that there’s finally a centralized browser detection variable. That way there won’t be /Konqueror|Safari|KHTML/.test(navigator.userAgent) running all over the place.Way to go for the native JSON support! Although it might be safer for .toJSON(true) to be the default setting.I have to say this has nothing to do with 1.5.1_rc1, but I really really really want to see Event methods actually being extended on event objects that are passed to event handler functions. It’s painfully silly to do Event.stop(event).

    • Vellica says:

      Дружище! Использовать яваскрипт для того что бы прижать футер тоже в какой то степени решение проблемы, но не панацея. LOREM IPSUM …html, body { heigth: 100%}.content-wrapper {min-heigth: 100%}.wrapper { padndig-bottom: 100px;}footer { heigth: 100px; margin-top:-100px}Ответить

  2. Helga says:

    Taking into consideration my interest in this topic I must say that your article is rewlly well-written and informative. Thank you!

  3. javaziez says:

    thanks for all the suggestions

  4. DemeXeMuse says:

    jelas, dan sangat membantu…


CAPTCHA Image
*

Subscribe to email feed

  • RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Youtube

Tutorial Membuat Apl

Tahun 2012, tahun terakhir saya membuat artikel di blog ini ...

Koneksi PHP 5.3 ke S

Ketika kita terbiasa menggunakan XAMPP, adakalanya ketika kita diharuskan membuat ...

SQLSRV di PHP 5.4

Sudah menggunakan PHP versi 5.4 keatas? Bagi pengembang aplikasi mungkin ...

WampServer 2.2 (WAMP

Sudah lama Wamp yang saya gunakan tidak diupdate, saya mencoba ...

Install Ubuntu 12.04

Install Ubuntu 12.04 menggunakan CD Sudah lama tidak update Ubuntu, saya ...