CSS Reset-vs * Wild Card

Warum kann ich nur ein einfaches Zurücksetzen:CSS Reset-vs * Wild Card

* { margin: 0; padding: 0; font-size: 100% }

statt:

html, body, div, span, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
abbr, address, cite, code, 
del, dfn, em, img, ins, kbd, q, samp, 
small, strong, sub, sup, var, 
b, i, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary, 
time, mark, audio, video { 
    margin:0; 
    padding:0; 
    border:0; 
    outline:0; 
    font-size:100%; 
    vertical-align:baseline; 
    background:transparent; 
}

Quelle

2015-08-11 Robert Rocha

Per [MDN] (https://developer.mozilla.org/en-US/docs/Web/CSS/Common_CSS_Questions#Use_of_the_.2A_selector) "Die Verwendung des * Selektors sollte minimiert werden, da es sich um einen langsamen Selektor handelt , vor allem, wenn es nicht als erstes Element eines Selektors verwendet wird. Sein Einsatz sollte so weit wie möglich vermieden werden. " – j08691

allererst möglich.

Beantworten der Frage: weil Sie wahrscheinlich nicht alle Elemente mit festgelegten Parametern haben möchten. Zum Beispiel haben Sie dort keine Eingänge, Tasten usw.

Quelle

2015-08-11 17:35:52 smnbbrv

Ich merke gerade den 2. Reset fast überall und habe mich gefragt warum so eine wortreiche Auswahl wenn eine Zeile genügen kann. –

@RobertRocha "*" wählt alle Elemente aus, die länger dauern, um fortzufahren, und in der Regel möchten Sie keine unnötigen Regeln haben. Es ist gut, nur die gebräuchlichsten zu verwenden, außer denen, auf die Sie die Regel nicht anwenden möchten. –

Vielleicht, weil Typwähler mehr specificity als der Universalselektor haben.

Oder weil dieser CSS-Reset nicht mit allen Elementen übereinstimmen soll, wie input s.

Quelle

2015-08-11 17:37:01 Oriol

Das Anwenden all dieser Stile auf alle Elemente würde zu einem unerwarteten Stil führen. Bitte beachten Sie auch das folgende Textfeld, Dropdown-Liste und Textarea-Reset mit allen Reset-Stilen:

<input type="text" value="foo" /> 
<select> 
<option>Foo</option> 
<option>Bar</option> 
</select> 
<textarea rows="10" columns="30">foo</textarea>

http://jsfiddle.net/esm63r30/

recht kahl!

Quelle

2015-08-11 17:41:04

Nun, ich habe die Grenze nicht eingeschlossen. –

@RobertRocha In der Tat, aber der Punkt ist, wenn Sie diese Stile so breit anwenden, können Sie mit unbeabsichtigten Stylings enden. Der von Ihnen eingeschlossene Reset zielt auf bestimmte Elemente ab. –

Mit einem CSS-Reset können Sie schnell einen guten Ausgangspunkt für Ihr Design erreichen, so dass Sie beim Codieren Zeit und Unordnung sparen. Anstatt alles eklatant zurückzusetzen, sollten Sie die Tags finden, die Sie normalerweise zurücksetzen möchten, und Standardwerte wählen, die für jedes Projekt einzeln gut funktionieren.

A Wildcard Zurücksetzen Mit

Es ist möglich, jeden einzelnen HTML-Tag zurückzusetzen, das nicht einen Stil mit einer Wildcard CSS-Anweisung zu ihm angebracht hat oder nicht. Während dies schnell und einfach ist, kann es auch unerwünschte Auswirkungen haben.

Wenn Sie alle Standardformatierungen von allen HTML-Tags entfernen, müssen Sie eigene Stile für diese Tags erstellen. Denken Sie daran, Sie können nur über div, span, ul, li und andere gemeinsame Elemente denken, komplett über abbr, pre und cite vergessen.

Quelle

2015-08-11 17:42:16

Dies ist eine gängige Technik namens CSS-Reset. Verschiedene Browser verwenden unterschiedliche Standardmargen, sodass die Seiten nach Margin unterschiedlich aussehen. Das * bedeutet "alle Elemente" (ein universeller Selektor), so dass wir alle Elemente so einstellen, dass sie keine Ränder haben und kein Padding enthalten, so dass sie in allen Browsern gleich aussehen.

Quelle

2015-08-11 17:47:44

CSS Reset-vs * Wild Card

Antwort

Verwandte Themen