Що означає властивість із зіркою у CSS?

Question 1

Сьогодні я переглядав файл css і знайшов такий набір правил:

div.with-some-class {
    display:block;                   
    margin:0;
    padding:2px 0 0 0;
    *padding:1px 0 0 0;
    font-size:11px;   
    font-weight:normal;
    *line-height:13px;
    color:#3D9AD0;
}

Що означає зірка в * заповнення і * висота лінії?

Дякую.

Question 2

Це "злом власності зірки" за тим самим принципом, що і "підкреслення зламу". Він включає сміття перед властивістю, яку IE ігнорує (* працює до IE 7, _ до IE 6).

Question 3

У CSS? Нічого; це помилка.

Через помилки в деяких версіях Internet Explorer вони не будуть правильно ігнорувати недійсне ім’я властивості, тому це один із способів надання CSS, характерний для цих браузерів.

Однак використання умовних коментарів є зрозумілішим та безпечнішим.

Question 4

Символ зірочок є дійсним символом підстановки в CSS. Поодинкове використання означає, що наступні властивості CSS будуть використані для всіх вузлів елементів у DOM. Приклад:

*{color:#000;}

Вищевказане властивість буде застосовано до всіх елементів DOM, тим самим перемагаючи природний каскад у CSS. Це можна замінити лише спеціальним націлюванням елементів DOM там, де це націлювання починає унікальний посилальний ідентифікатор. Приклад:

#uniqueValue div strong{color:#f00;}

Вищевказана властивість замінить підстановочний знак і зробить текст усіх сильних елементів, що трапляються в div всередині елемента зі значенням атрибута id "uniqueValue".

Використання універсально застосованих символів підстановки, таких як перший приклад, може бути швидким і брудним методом написання таблиці стилів скидання. Це швидко і брудно, тому що детальне визначення презентації після шаблону, ймовірно, створить надзвичайно роздутий аркуш стилів. Якщо ви збираєтеся використовувати підстановочний знак, я б запропонував використовувати його більш конкретно, наприклад:

* strong{color:#f00;}

Наведений вище приклад зробить текст усіх сильних елементів червоним кольором, незалежно від інших властивостей CSS, не вказаних з унікальним ідентифікатором. Це вважається набагато безпечнішим, ніж використання декларації "!

Астерики у вашому прикладі знаходяться не в тому місці, оскільки вони, здається, трапляються всередині оголошень властивостей, коду, який входить у фігурні дужки, і це, ймовірно, призведе до помилки.

Question 5

Це хак для IE7.

Якщо ви напишете це:

.test {
    z-index: 1;
    *z-index: 2;
}

на всіх навігаторах, які відповідають стандарту W3C <div class="test"></div>HTMLElement, є, z-index: 1але для IE7 цей елемент має z-index: 2.

Це не є стандартним.

Щоб домогтися того ж із стандартом W3C, виконайте такі дії:

Додайте умовний коментар Internet Explorer (це простий HTML-коментар для всіх інших навігаторів, тож це стандартний спосіб).

<! - [якщо IE 7]> <html lang = "fr" class = "ie7"> <! [endif] ->

<! - [if gt IE 7]> <! -> <html lang = "fr"> <! - <! [endif] ->

І використовуйте попередні правила так:

.test {
    z-index: 1;
}
.ie7 .test {
    z-index: 2;
}