Przeglądałem dziś plik css i znalazłem następujący zestaw reguł:
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;
}
Co oznacza gwiazda w * wypełnieniu i * wysokości linii?
Dzięki.
Odpowiedzi:
To jest „hack właściwości gwiazdy” na tej samej zasadzie, co „hackowanie podkreślenia”. Zawiera śmieci przed właściwością, którą IE ignoruje (* działa do IE 7, _ do IE 6).
W CSS? Nic; to jest błąd.
Z powodu błędów w niektórych wersjach Internet Explorera nie będą one poprawnie ignorować nieprawidłowej nazwy właściwości, więc jest to jeden ze sposobów dostarczania CSS specyficznych dla tych przeglądarek.
Korzystanie z komentarzy warunkowych jest jednak jaśniejsze i bezpieczniejsze.
*przed. Jeśli nabierze znaczenia, obecne przeglądarki zignorują to, umożliwiając bezpieczne dodanie rozszerzenia. Na tym polega zasada „trzeba ignorować”.
Znak gwiazdki jest prawidłowym symbolem wieloznacznym w CSS. Użycie tego samego oznacza, że następujące właściwości CSS będą używane we wszystkich węzłach elementów w DOM. Przykład:
*{color:#000;}
Powyższa właściwość zostanie zastosowana do wszystkich elementów DOM, tym samym pokonując naturalne kaskadowanie w CSS. Można go zastąpić tylko przez specjalne otagowanie elementów DOM, w przypadku których to kierowanie rozpoczyna odwołanie do unikalnego identyfikatora. Przykład:
#uniqueValue div strong{color:#f00;}
Powyższa właściwość nadpisze symbol wieloznaczny i sprawi, że tekst wszystkich silnych elementów, które występują w elemencie div w elemencie o wartości atrybutu id równej „uniqueValue”.
Użycie powszechnie stosowanych symboli wieloznacznych, takich jak w pierwszym przykładzie, może być szybką i brudną metodą pisania resetowanego arkusza stylów. Jest to szybkie i brudne, ponieważ szczegółowa definicja prezentacji po symbolu wieloznacznym prawdopodobnie spowoduje bardzo rozdęty arkusz stylów. Jeśli masz zamiar użyć symbolu wieloznacznego, sugerowałbym użycie go bardziej szczegółowo, na przykład:
* strong{color:#f00;}
Powyższy przykład sprawi, że tekst wszystkich silnych elementów będzie miał czerwony kolor, niezależnie od innych właściwości CSS, które nie zostały określone za pomocą unikalnego identyfikatora. Jest to uważane za znacznie bezpieczniejsze niż użycie deklaracji „! Important”, ponieważ wiadomo, że taka deklaracja zakłóca naturalną funkcjonalność zamierzonych zachowań i jest koszmarem związanym z konserwacją.
Gwiazdki w Twoim przykładzie znajdują się w niewłaściwym miejscu, ponieważ wydają się występować w deklaracjach właściwości, w kodzie umieszczonym w nawiasach klamrowych, co prawdopodobnie spowoduje błąd.
To jest hack dla IE7.
Jeśli to napiszesz:
.test {
z-index: 1;
*z-index: 2;
}
we wszystkich nawigatorach zgodnych ze standardem <div class="test"></div>HTMLElement W3C ma z-index: 1ale dla IE7, ten element ma rozszerzenie z-index: 2.
To nie jest standardowe.
Aby osiągnąć to samo ze standardem W3C, wykonaj następujące kroki:
Dodaj komentarz warunkowy przeglądarki Internet Explorer (jest to prosty komentarz HTML dla wszystkich innych nawigatorów, więc jest to standardowy sposób).
<! - [jeśli IE 7]> <html lang = "fr" class = "ie7"> <! [endif] ->
<! - [if gt IE 7]> <! -> <html lang = "fr"> <! - <! [endif] ->
I użyj poprzednich zasad w ten sposób:
.test {
z-index: 1;
}
.ie7 .test {
z-index: 2;
}