CSS-Prolog = Sinnvoll ?!
 

Hallo Leute,

ich habe mir über einen festen CSS-Prolog, damit meine ich einige Definitionen die ich in jedem Style einsetzen möchte/kann - quasi ein Default-Reset, gedanken gemacht.

Ziel ist eine (fast) einheitliche visuelle Erscheinung in möglichst vielen Browsern / Ausgabemedien. Der nun gezeigte CODE zeigt meinen Ansatz, dieser hat natürlich zur Folge das alle Elemente im Dokument vom Style komplett definiert werden müssen, was aber bestimmt kein Fehler ist.
Nur befürchte ich dass dieses Vorgehen einige Fallstricke beinhaltet, deshalb möchte ich mal Euere Meinung bzw. Erfahrungen dazu hören/lesen.

Re: CSS-Prolog = Sinnvoll ?!
 

also margings und paddings für alles erst mal zu eliminieren, habe ich mir auch angewöhnt.
dann "muss" ich mir wirklich jeden abstand, den ich haben will, selber definieren - und komme damit nicht in die verlegenheit, irgendwo das überschreiben eines browser-defaults zu vergessen.

line-height auch an dieser stelle für alle elemente zu definieren habe ich noch nicht probiert. müsste man mal kurz überlegen, ob das evtl. mit der vererbung probleme bereiten könnte ... denke aber eher nicht.

na ja, und font-size:100.01% für body sind ja schon quasi-standard, wenn man im folgenden mit em arbeiten möchte - nicht exakt 100%, um einen rechenbug des IE zum umgehen, aber nur noch 0.01% extra, um im safari nicht die schrift zu fett werden zu lassen.
nur warum du diese angabe auch noch für html machen willst, leuchtet mir spontan nicht ein.


p.s.: hier hat sich auch schon mal jemand gedanken über ein "css reset" gemacht, evtl. auch interessant (wenn auch mir persönlich etwas zu weit gehend, bzw. konnte den nutzen darin noch nicht so ganz erkennen.)

Ähmm.... kann ich Dir jetzt gar nichts zu sagen, ist in diesem Fall aus meiner Historie :? , habe bisher mein CSS wie unten eingeleitet, und dort haben einige Eigenschaften für HTML+BODY durchaus eine Berechtigung. Ein Fehler ist es mit Sicherheit nicht.

Ich habe den Link von wahsaga mal ein bisschen verfolgt und bin auf "display:table;" gestoßen.
Blöde Frage, aber wird eine Tabelle nicht sowieso immer als Tabelle - mit den Eigenschaften einer Tabelle angezeigt?
Ich kann auch nicht erkennen das an den Einstellungen der Tabelle vorher gedreht wurde.
Gruß, Philippp

Ich schreib in meine CSS immer:

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

Das funktioniert so ziemlich auf jedem halbwegs aktuellen Browser (Win: IE5.*, IE6, Firefox, Opera und Mac: IE5, Safari).

Halbwegs :!: Das heißt wohl Du hast so noch keine negative/fehlerhafte Erfahrungen ?

Was ist mit line-height, ich meine mich zu erinnern das Toscho mal über sehr unterschiedliche Defaults referiert hat.

Bei den genannten Browsern hatte ich noch keinerlei Probleme damit, ja. Genau das wollte ich sagen ;)

line-height gebe ich auch nachher explizit an, je nach Einsatz.

Ja, so habe ich es bisher auch gemacht, nur habe ich keinen BOCK mehr auf die kleinen Überraschungen,
siehe :arrow: http://www.xhtmlforum.de/viewtopic.php?t=2992

da eine relative font-size-angabe kaskadiert, würde ich diese nicht für * angeben.
bei 100.01% mag das noch unproblematisch sein - aber wenn beispielsweise mal als default für die ganze seite 120% gewünscht wird und du das da bei * rein setzt ... viel spass :)

sehe ich ja jetzt erst :shock:

Hast die Dich im Posting verdöddelt oder machst Du es so, ein gültiger Wert für keinen Rand wäre wohl [border: none].

Einmal erst mußte ich den Opera beim Fieldset-Element etwas anders überzeugen:
:arrow: border: 0px solid #000000;

border: 0; enspricht auch einem border: none; ... wen Du etwas Gegenteiliges weißt, her damit ;)

Toscho empfiehlt stark, die line-height-Angabe ganz ohne Einheit hinzuschreiben.

Das Ganze kann man dann auch noch kürzen, z.B. so:

font: 100.01%/1.5 Helvetica, Arial, sans-serif;

Die Kurzform von font geht so:
font : font-style font-variant font-weight font-size line-height font-family;

Die müssen aber nicht alle aufgezählt werden. Im obigen Beispiel fehlen z.B. die ersten drei, die dann einfach auf den default-Wert gesetzt werden (normal).
Helvetica setze ich deshalb vor Arial, weil es im Zweifelsfall die schönere Schrift ist (und "Mutter" der Arial). Wer beides hat, bekommt dann das Original und nicht die Kopie.

Tja, irgendwie habe ich im Kopf das es nicht ginge :? - jetzt stehe ich da in der kurzen Hose........

Obig habe ich so durch den Validator geschickt :arrow: "Keine Fehler oder Warnungen gefunden"

aber verbessert zu :arrow:

Obig habe ich so durch den Validator geschickt :arrow: "Keine Fehler oder Warnungen gefunden"

aber verbessert zu :arrow: Was will mir der Validator sagen :shock:

In den *-Selektor gehört meiner Meinung nach auf jeden Fall ein font-family, da einige Browser z.B. für input-tags andere Schriften verwenden. Manchmal "braucht" man natürlich einen bunten Font-mix, dann macht's keinen Sinn :D

Vielleicht, dass "border" eine Kurzschreibweise ist, die normalerweise 3 Werte erfordert? Alternativ wäre natürlich möglich:

Ich beginne meine Stylesheets auch meistens erst mit allgemeinen Angaben, die ich später bei Bedarf wieder überschreibe.
Also:
Texteingabe-Elemente bekommen bei mir immer eine Festbreitenschriftart (hilft dem Leser, Tippfehler zu sehen), aber Buttons fasse ich nicht an.

@Philippp: Das »display:table« ist offenbar wenig durchdacht: Wenn ein Browser das abschaltet, wird es einen guten Grund dafür geben (Opera beispielsweise im Handheld-Modus); es ist eine furchtbar dumme Idee, das dann wieder anzuschalten.

»border:0« würde ich niemals für alle Elemente setzen, es ist aber durchaus eine valide Konstruktion. Der W3C-Checker hat hier einen uralten Bug, den man getrost ignorieren kann. Das Schlüsselwort »inherit« darf in Shorthands immer nur als einziger Wert stehen, niemals in Kombination mit anderen Werten.
Daß der Checker trotz des Namens kein Validator ist und sein kann, sollte sich ja langsam rumgesprochen haben. Es gibt keinen Anlaß, extra deshalb Fehler ins eigene Stylesheet einzubauen.

@terrikay: Die meisten unter Windows vorhandenen Helvetica-Variationen sehen extrem scheußlich aus und sind sehr schlecht lesbar. Nicht machen.

@magick: Sicher meintest du »border-width«? ;)

Gruß
Thomas

Könntest du mir das mal kurz erklären? Was bringt es wenn man die Angabe im CSS stehen hat?

Google :arrow: [@charset "utf-8" css]

3. Ergebnis :arrow: http://news.css-technik.de/comments/A468_0_1_0_C/

Opera :!: Und da dieser Beitrag von TOSCHO kommt ist es etwas spezielles für genannten Browser - mit Sicherheit. Denn in der W3C-Spec. habe ich nichts darüber gefunden.

So fange ich mittlerweile an:Unvermutete Probleme habe ich damit noch keine feststellen müssen!

Ich habe TOSCHOs Variante übernommen, und nach längerem Nachdenken als hervorragend eingeschätzt.

Du darfst nur nicht für [line-height] eine Einheit mitgeben, weil dann wird diese kaskadiert. Ist trotzdem Valide. Und TOSCHO hat es ja auch so gezeigt.

Das ich das mit Google auch hätte rausfinden können ok aber wenn er das hier im Forum schon so postet kann man ja auch gleich nachfragen oder? ;) Trotzdem danke.

Missverständnis :!: :!: Ich wollte Dich wegen der Frage nicht mit der Suchfunktion nerven; nur war dass das Ergebniss meiner Recherchen. Und das wollte ich Dir schon mal zeigen.

Toscho wird dazu mit Sicherheit noch was mitteilen..... ;)

bei mir siehts im moment noch so aus:

und dann war da mein ich noch irgendwas was mir gerade nicht einfällt. ich guck evtl später nochmal zuhause falls es wen interessieren sollte ;)
ist nich die beste methode, ich weiß. aber ich komm so gut zurecht.

Dann weiß der Browser auch nach dem Abspeichern noch, wie das Stylesheet kodiert wurde.

Opera hält sich daran, IE und Mozilla nicht.
Lektüre: http://www.w3.org/TR/REC-CSS2/syndata.html#q23

Mit dem Opera-only-Hack hat das nichts zu tun. Den empfehle ich in dieser Form mittlerweile übrigens nicht mehr, weil der IE das Stylesheet nämlich manchmal doch lädt, ohne es freilich zu verarbeiten.

Gruß
Thomas

Habe meine CSS geändert inScheint überall zu funktionieren!?

Und habe, nach stundenlangem Herumprobieren in FF, IE und Opera wieder umgestellt auf:Auch hierbei scheint es, wie so oft beim Umgang mit Browsern, nicht die ideale Lösung zu geben, sondern jeder Befehl muss im Zusammenhang mit anderen Befehlen gesehen (und getestet) werden!?

Wenn man das so macht zeigt der FF das Hintergrundbild nicht an. Erst wenn der Code so ausschaut:

gehts. margin und padding haben keine besondere Bedeutung im Beispiel.

@Tapsiturtle: Kannst du mal ein Beispiel online stellen, in dem dein erster Code nicht funktioniert?
Dein zweiter bringt nämlich sehr wahrscheinlich Netscape 6 zum Absturz, weil der Hintergrundbilder für <html> ganz und gar nicht mag.

@Dieter: Wenn du die »Verdana« sowieso hinter die generische Schriftfamilie setzt, kannst du sie auch gleich ganz weglassen (empfohlen). Deine beiden ersten Schriftangebote empfinde ich übrigens auch nicht gerade als Augenschmaus, aber das weißt du ja inzwischen … ;)

Gruß
Thomas

Hier standen mal links die nicht mehr aktuell sind. ;)

In diesem Fall bist du einfach in den Klassiker gerannt: <body> hat überhaupt keine Höhe, weil das Element nichts beeinhaltet, das es ausdehnen könnte. Der Hintergrund wird also angewandt, ist aber mangels FLäche nicht sichtbar.
Mensch, du liest hier doch wirklich lange genug mit, um solchen Fallen auszuweichen!

Lesen und Verstehen. Das ist mein Problem. ;) Hatte letz wieder was geändert am CSS, dabei ist das wohl geschehen.

@toscho: Du weisst ja, dass ich Schriften mit 100.01% angebe - und dann wird es, bei "Verdana" an erster Stelle, ganz schön groß, vor allem im IE!

Das wäre dann für kleinere Auflösungen zu groß, oder!?

Lieber Dieter,

du solltest unseren toscho doch langsam kennen. ;)

Er mag weder Verdana noch Arial - obwohl beide Schriften ansonsten sehr fürs Web empfohlen werden.
Jaja - toscho, ich weiß - du denkst bei Arial immer gleich an Bußgeldbescheide... ;)

Wenn man beide nicht will, bleiben aber nicht mehr so viele, die noch einen halbwegs guten Verbreitungsgrad haben - zumal die Times New Roman wegen schlechter Lesbarkeit ausscheidet und die Comic Sans ... :roll: - naja - die disqualifiziert sich eigentlich selbst.

Ob es erforderlich ist, dass alle die Texte in der gleichen Schrift sehen können, ist natürlich auch die Frage.

Ich persönlich finde die Arial übrigens durchaus o.k. - und du darfst mich gerne "Typographiebanause" schimpfen, toscho!

Liebe Terry!

Du weisst ebenso gut wie ich, dass er (auch) meine Seite sowieso mit Userstylesheet betrachtet :lol:

Im übrigen finde ich es, ehrlich gesagt, herrlich, dass wir uns über diese Themen überhaupt streiten können! Denn Schriftgrößen und Schriftarten sind ja nicht invariant wie bei einem gedruckten Erzeugnis, sondern können, je nach Geschmack oder Vorlieben vom Seitengestalter und sogar, ausreichende Kenntnisse vorausgesetzt, vom Nutzer frei bestimmt werden!

Wenn man es mal als Vorteil begriffen hat, kann mensch doch prima damit leben!

Ich jedenfalls kann es! 8)

Dieter, ich habe hoffentlich nirgendwo anklingen lassen, »Verdana« sei eine ernstzunehmende Alternative … die ist nunmal für ganz spezielle Anlässe entowrfen worden: Ungewöhnlich kleine Schrift in englischer Sprache. Deshalb sind die Anführungszeichen auch verkehrtherum: Hat niemanden interessiert, weil sie a) im angestrebten Einsatzgebiet kaum benutzt werden und dort b) eh nicht mehr in der nötigen Feinheit zu erkennen wären.

Dabei gibt so viele schöne serifenlose Schriften: »Futura«, »Bitstream Vera Sans« (gut, die wirkt auch schnell zu groß), »Lucida Grande«, »Geneva«, »Gill Sans«, eventuell auch »Utah«, »News Gothic« und, und, und …

Es ist egal, ob deine Seite »überall gleich« aussieht. Das ist weder möglich noch erstrebenswert. Gut muß sie aussehen, und wenn du dabei die Besonderheiten des jeweiligen Lesers eher betonst als zu unterdrücken versuchst: Um so besser!
Das tut niemandem weh und hebt deine Seite wohltuend vom Verdana-Arial-Helvetica-Allerweltsbrei ab, mit dem man sonst gequält wird (@terry: ☮).

Gruß
Thomas, der die eigene Seite gerade in »Futura« und »Hoefler Text« setzt

Hallo, Thomas!

Darf ich mich selbst zitieren: PS: Habe soeben festgestellt, auf meinem PC befindet sich kein Futura!

Na und? ;)

Offiziell heißt es: Das reicht dann auf jedenfall - selbst wenn trotzdem eine breite angegeben ist, wird kein Rahmen dargestellt.

Leider wissen nicht immer alle Ausgabegeräte was "Offiziell" ist !!!


Folgendes hatte ich mal für eine Opera Version benötigt:
Und da es nun mal kein Brot frist habe ich es mir einfach angewöhnt ;)

Wenn man es ganz exakt haben will, müsste man alle drei Eigenschaften abschalten - border-width, border-style und border-color (http://de.selfhtml.org/css/eigenscha...men.htm#border) ... sprich:

border: 0 none transparent;

*g* ;)

Jippie, ein schönes Thema, wofür es mal kein falsch und richtigt gibt (grundsätzlich). Höchstens ein "ach, so machst Du das".
Derzeit nutze ich folgenden Basis-Stylesheet, der immer am Anfang der Entwicklung steht. Eventuell muß die Hintergrundfarbe angepaßt werden, aber dann mache ich das auch gerne, indem ich eine neue Sektion erstelle und dort dann den Hintergrund neu definiere. Das Basis-Stylesheet soll möglichst unangetastet bleiben.
Bei der Version ist immer 1em = 10px, was das Denken in SChriftgrößen für mich stark vereinfacht. Denn auch wenn es mancher nicht mag: ich denke in traditionellen Schriftgrößen und die Designer, deren Entwürfe ich umsetze, ebenso. Ich kann es ihnen nicht verdenken.
Länger beschriben habe ich es im
Webstandards-Adventskalender.