2011-07-29 15 views
12

Na przykład the Meyer reset ma długą listę elementów: , które według mnie można zastąpić numerem *?Dlaczego resetowania CSS nie używa "*" do pokrycia wszystkich elementów?

Widziałem jakieś zastosowanie:

* { 
    margin: 0; 
    padding: 0; 
} 

Ale bardziej „zaawansowanych” resetuje wydaje się iść z wyraźnie stwierdzając tagi.

Jedynymi elementami ja nie widzę pokryte w liście zmiennych, które użytku (jak mniemam) z *input, button, a select -the Eric Meyer zresetować, w rzeczywistości, nie wydaje się naprawdę radzę sobie z tymi elementami. Jeśli unikanie resetowania tych elementów jest problemem ... dlaczego byś nie? Przeglądarki oczywiście nie wszystkie elementy formularza wyświetlania to samo.


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, I, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video
jeśli jesteś ciekawy.

Odpowiedz

15

Zgadłeś poprawnie - powodem są elementy form.

Jeśli ustawisz border: 0 na przykład na input, utracisz natywną stylizację.

Na przykład: http://jsfiddle.net/nrB6N/

I nie ma sposobu, aby ta domyślne stylizacji powrotem.

+0

(Wybrałem "border: 0", ponieważ jest to dobry przykład i jest to wspomniany reset CSS.) – thirtydot

+0

Dziękuję za odpowiedź - czy istnieje ustalony reset elementów formularza, który w jakiś sposób omija ten problem? (Być może używając JavaScriptu do wykrycia przeglądarek i dostosowania dopełnienia lub czegoś zgodnie z rodzimym stylem? Oczywiście nie wiem, o czym tu mówię.) –

+1

Ogólnie, po prostu nie resetuj ich. Czy są jakieś szczególne niespójności, o które się martwisz? – thirtydot

2

Głównie dlatego, że osiągnął wydajność. Ponadto, ponieważ nie chcesz stosować resetowania do wszystkich elementów przez cały czas, ale te, które powodują problemy (wokół modelu pudełkowego).

Również resetowanie stylu select, input może powodować niepożądane wrażenia.

+0

Czy mógłbyś trochę tutaj rozwinąć? Jak to wpływa na wydajność (źródło/testy?) Dlaczego nie chcesz resetować wszystkich elementów przez cały czas? W jaki sposób resetowanie 'select' i' input' powoduje niepożądane doznania [s] i jakie one są? –

+0

Bycie otwartym pomaga w Twojej ulubionej przeglądarce - IE :). Reszta z nich jest w porządku. – Mrchief

+0

Czy masz na to źródło? –

8

* jest naprawdę NAPRAWDĘ zły pod względem wydajności (nie ma to większego znaczenia na małych stronach, ale myślę, że reperkusje dla ponad 5000 elementów HTML na przykład). Kierowanie określonych elementów jest zawsze szybsze i bardziej wydajne. Należy również pamiętać o wyborze identyfikatora do użycia identyfikatora lub klasy. Policz więcej niż typowy JavaScript dzisiaj, a dowiadujesz się, że elementy kierujące z ID lub precyzyjnymi instrukcjami CSS dają poprawę wydajności.

http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

PS. Oprócz prędkości, ma również wpływ na elementy input, które po * obramowaniu, wypełnieniu i marginesie 0 stają się dość trudne do ukształtowania, dzięki czemu wyglądają tak samo w różnych przeglądarkach, szczególnie w IE. Przeczytaj więcej: http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/

+0

Czy masz na to źródło? –

+2

Znaleziono i dodano do mojej odpowiedzi. – red

+2

dzięki za linki! – Mrchief

Powiązane problemy