Browser CSS ignorieren - Seite 3

Feirell · #21 (**permalink**) 19.05.2013, 20:25

Ist es eigentlich schlimm wenn die definition so lang ist ich meine um so genauer umso besser oder ?

Manfred62 · #22 (**permalink**) 19.05.2013, 20:46

hier mal eine primitive Version (ohne Tabelle, Liste od. ähnl.), geht eigentlich in jedem Browser(?).
Der reset stammt von Heiko.

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Form Test</title>
    <style type="text/css">
        * {
            margin: 0;
            font-size: 100%;
            vertical-align: baseline;
        }
        
        html, body, div, span,
        h1, h2, h3, h4, h5, h6, p, a,
        ul, ol, li, dl, dt, dd,
        address, blockquote, cite,
        hr, br, img, object, applet, iframe,
        form, fieldset, legend, label,
        table, thead, tbody, tfoot, caption, tr, th, td,
        em, strong, i, b, u, q, s, del, dfn, big, small, sub, sup,
        pre, code, abbr, acronym, ins, kbd, samp, strike, tt, var {
            padding: 0;
            border: none;
        }
        
        ul, ol {
            list-style: none;
        }
        
        /* Schrift-Deklarationen zur weiteren Vererbung */
        
        body, input, button, select, textarea {
            font-family: Arial, sans-serif;
        }
        
        body {
            line-height: 1.5;
            color: #fff;
        }
        h3 {
            background: #00f;
            position: absolute;
            top: -17px;
            left: 10px;
            padding: 3px 10px;
            font-size: 1.1em;
            border-radius: 5px;
        }
        form {
            width: 260px;
            padding: 25px 10px 10px;
            background: #00f;
            margin: 30px auto;
            position: relative;
            border-radius: 5px;
        }
        label {
            float: left;
            text-align: right;
            margin-bottom: 4px;
            width: 120px;
        }
        input, select {
            width: 120px;
            float: right;
            margin-bottom: 5px;
        }
        select {
            width: 126px;
        }
        .eingabe {
            width: 100%;
            margin-bottom: 0;
        }
    </style>
</head>
<body>
	<form action="blabla">
            <fieldset>
                <h3>Spieler</h3>

                <label for="name">Name:</label>
                <input name="name" id="name" placeholder="Name" type="text">

                <label for="password">Passwort:</label>
                <input name="password" id="password" placeholder="Passwort" type="text">

                <label for="alliance">Allianze:</label>			
                <select id="alliance" name="alliance">
                   <optgroup label="Dropsters">
                      <option>
                         Dropsters 1
                     </option>
                     <option>
                         Dropsters 2
                     </option>
                     <option>
                         Dropsters 3
                     </option>
                     <option>
                         Dropsters 4
                     </option>
                 </optgroup>
             </select>

             <label for="rang">Rang:</label>
             <select name="rang" id="rang">
                <optgroup label="Rang">
                    <option>
                        Geblockt
                    </option>
                    <option>
                        Mitglied
                    </option>
                    <option>
                        Admin
                    </option>
                    <option>
                        Super Admin
                    </option>
                </optgroup>
            </select>

             <input class="eingabe" value="Eintragen" type="submit">
         </fieldset>
     </form>
</body>
</html>

Feirell · #23 (**permalink**) 19.05.2013, 21:11

Niceee hast du das gerade alles selber geschrieben um mir zu helfen O,o.
Wenn ja dann mein respekt und Dank, ich werde das auf jeden fall so verwenden (alle css angaben).

Mal sehen ich bastel mir das gerade zusammen.

Feirell · #24 (**permalink**) 19.05.2013, 21:46

Ich bin gerade echt zu blöd!

Ich kriege dein Beispiel nicht nachgebildet.
Diese herausstehende Überschrift es klappt einfach nicht

Feirell · #25 (**permalink**) 19.05.2013, 22:04

Hat sich erledigt habs hin bekommen, ich weis auch nicht was los war.

CaptainGerrard · #26 (**permalink**) 19.05.2013, 22:05

Zitat:

Zitat von gato

Ein genereller Reset ist schlecht, weil davon alle Elemente betroffen sind. Das ist zum einen überflüssig, dann vermindert es die Performance und kann sich zudem negativ auf die Verwendbarkeit der Formularelemente auswirken.

Hast du eine brauchbare Seite die ausspuckt welche Standardeigenschaften welche HTML Elemente verwenden?
Z.B. eben UL, OL den margin-left...

gato · #27 (**permalink**) 19.05.2013, 23:48

Zitat:

Zitat von Feirell

Ist es eigentlich schlimm wenn die definition so lang ist ich meine um so genauer umso besser oder ?

Je kürzer desto besser. Es erhöht die Lesbarkeit und macht verständlicher, welches Element formatiert werden soll.

Aus Browsersicht musst du bedenken, dass für jedes Element überprüft werden muss, ob es wirklich ein Nachfahre all der Elemente in genau dieser Hierarchie ist. Ich weis zwar nicht, ob der Nachteil spürbar ist, aber der Browser muss auf jeden Fall mehr Rechenleistung erbringen.

Zitat:

Zitat von CaptainGerrard

Hast du eine brauchbare Seite die ausspuckt welche Standardeigenschaften welche HTML Elemente verwenden?
Z.B. eben UL, OL den margin-left...

Die grundsätzliche Empfehlung wird von HTML5 im Abschnitt Rendering angegeben.
iecss.com kennt die Standardwerte verschiedener Browser, ist aber nicht aktuell.

Die Suche nach dem perfekten Reset ist eine Suche nach dem heiligen Gral. Du wirst nicht fündig werden.

Sinnvoll ist es, seine Stylesheets stets zu validieren. So wird man auf wichtige Mängel hingewiesen, etwa dass Hintergrund- und Vordergrundfarbe (=Textfarbe) gemeinsam definiert werden sollten.

Außerdem kennt man üblicherweise die Elemente, die man verwendet. Es spricht nichts dagegen, für ein ul (und dessen Nachfahren), das etwa Kind eines nav-Elements ist oder eine ID #navigation besitzt, margin und padding auf Null zu setzen.
Dagegen ist es für den Benutzer von Nachteil, wenn grundsätzlich die Abstände von Absätzen entfernt werden.

Handwerklich betrachtet ist ein Reset zudem nicht sehr elegant. Die verschiedenen Abstände müssen sorgsam festgelegt werden. Eine Detailarbeit bleibt also ohnehin nicht aus.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Unterschiede Browser mit CSS	blazinblaze	CSS	1	24.09.2010 16:06
2 CSS Files -> 1 CSS File	Habi	CSS	7	17.02.2010 16:25
Wege zum guten CSS - Ausgewählte Links	Sp33dy G0nz4l3s	Ressourcen	1	27.05.2008 12:09
CSS Buchtipp Eric A. Meyer	vistahr	Ressourcen	2	01.11.2006 19:53
Browserneurose	SimonWpt	CSS	39	15.07.2005 11:51