Fungsi !important Pada CSS

March 23rd, 2012

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.

This entry was posted on Friday, March 23rd, 2012 at 04:34 and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

4 Responses to “Fungsi !important Pada CSS”

  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).

  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. Vellica Says:

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

  4. javaziez Says:

    thanks for all the suggestions

Leave a Reply

*