Divitis ist das zwang- und massenhafte Verwenden des HTML-Elements <div>. Es kann bedeuten, dass man einfach statt semantischer Elemente <div> benutzt, aber es kann auch einfach heißen, dass man alles Mal um Mal in <div> einpackt. Bei komplexeren Layouts passiert das selbst den ausgekochtesten HTML-Taliban und meist merkt man dann erst spät, was man da für einen verschachtelten Abfall verzapft.
Um sich diesbezüglich etwas bremsen, gibt ein ganz einfaches Mittel: Einrückungstiefe erhöhen!
Bei Aptana: Window → Preferences → General → Editors → Text Editors → Displayed tab width
Jeder anständige Editor lässt den User festlegen, wie viele Zeichen ein Tab breit sein soll. Zwei oder vier sind gängig, aber mehr sind zumindest mal eine Überlegung wert. Denn abgesehen davon, dass größzügige Einrückung allgemein die Übersichtlichkeit steigert, merkt man so auch schneller, ob man gerade dabei ist, ein Divitis-Monstrum zu verbrechen. Was in den Linux Kernel Coding Guidelines steht, kann für uns Webfritzen auch nicht so falsch sein: wenn man plötzlich anfangen muss, seitwärts zu scrollen um neue <div> einzufügen, hat man sehr wahrscheinlich bisher ganz schönen Mist zusammengetippt und sollte sein HTML überarbeiten.
Kommentare (21)
Christian ¶
18. April 2008, 11:43 Uhr
Unsinnige DIVs sind doof, aber lieber macht man mal eins mehr als eins zu wenig und ist am ende flexibler und umschifft noch ein paar Bugs was die IE-Reihe angeht.
Aber die Sache mit der Einrückung ist ein guter Tipp, allerdings sieht man das auch schon bei kleinerer Einrückung, wenn man auf einmal schier unendliche Treppen hat.
Peter ¶
18. April 2008, 11:46 Uhr
Zitat Christian:
Man nimmt es vielleicht nebeinbei wahr, aber wir wollen ja die Hier-läuft-was-falsch-Alarmglocke auslösen! Da kann etwas Deutlichkeit nicht schaden.
Daniel ¶
18. April 2008, 12:38 Uhr
Ich rücke immer zwei Zeichen ein, das ist dann super lesbar. Alles was mehr eingerückt ist stört bei mir die Lesbarkeit deutlich.
Ansonsten sehe ich es absoklut so wie Christian, ich verwende lieber ein DIV mehr und umgehe irgendwelche CSS-Hacks für den IE6 oder gar ein extra Stylesheet.
Peter ¶
18. April 2008, 12:43 Uhr
Zitat Daniel:
Wie spart man sich durch ein
diveinen Stylesheet ein?Lothar Baier ¶
18. April 2008, 12:52 Uhr
Zitat Peter:
"Wie spart man sich durch ein div einen Stylesheet ein?"
Ganz einfach. Wenn Du zum Beispiel bei einem floatenden Div eine Margin in Richtung des Floats brauchst, dann verdoppelt der IE die Margins. Ein zweites Div darum gepackt mit einem Padding statt Margin verhindert das. Und Du sparst Dir das Stylesheet für den IE mit den veränderten Margin-Werten.
Peter ¶
18. April 2008, 12:59 Uhr
Dass ich das richtig verstehe … in dem nur sehr bedingt wahrscheinlichen Fall, dass der einzige CSS-Bug, den ich im IE habe (sonst habe ich ja ohnehin einen IE-Stylesheet) von der oben genannten Sorte ist, kann ich das , indem ich zusätzliches semantisch sinnfreies Markup in meine Seite kloppe?
Ihr wollt mich doch verschaukeln!
soophie ¶
18. April 2008, 14:09 Uhr
Zitat Peter:
Ist aber leider so. Und ich mache für ein unterschiedliches Margin sicher kein IE.css auf.
Peter ¶
18. April 2008, 14:42 Uhr
Dass das funktioniert, ist schon klar. Ich hätte nur nicht gedacht, dass im Jahre 2008 noch wirklich Leute ihr HTML für den Internet Explorer optimieren! Sportet ihr auch noch alle diese lustigen kleinen Buttons?
Das waren noch Zeiten damals …
Lothar Baier ¶
18. April 2008, 15:05 Uhr
Natürlich optimiere ich keine Seiten für den IE. Aber ich mache meine Seiten so, dass sie auch im IE ordentlich aussehen. Schon allein deshalb, weil meine Kunden meist selbst den IE benutzen.
Und ja, ich finde es logischer, ein weiteres div einzufügen, anstatt dafür eine eigenständige Datei zu eröffnen. Serverlast und Bandbreite danken es sehr.
soophie ¶
18. April 2008, 15:36 Uhr
wie optimierst du denn für des Useres liebsten Browser? Ignorieren sollte man ihn nämlich nicht und wenn statt 162px margin 324px sind fällt das einfach auf
Peter ¶
18. April 2008, 16:01 Uhr
Zitat soophie:
Mit Conditional Comments und eigenen IE-Stylesheets. Da hat man den Vorteil, dass alle Reparaturen schön übersichtlich in einer kompakten Datei liegen und sich nicht kreuz und quer durch den Quelltext verteilen. Das ist die praktzierte Trennung von Inhalt und Design! Wenn wir jetzt wieder anfangen, mit HTML-Elementen das Aussehen einer Seite beeinflussen zu wollen, können wir auch gleich wieder
fontundmarqueeausgraben.Zitat Lothar Baier:
Wenn du HTML einbaust, dass nur der IE braucht, obwohl das Problem auch anders zu lösen wäre, ist das durchaus eine IE-spezifische Optimierung der Seite. Der IE-Stylesheet ist das gewissermaßen auch, aber dessen Verlinkung ist nur eine Zeile lang und ein entsprechend kleineres Übel.
Zitat Lothar Baier:
Natürlich. Aber bei wie vielen deiner Projekte ist das wirklich ein Problem? Das müssten ja wirklich große und größte Seiten sein damit das ins Gewicht fällt. Wenn das dann ins Gewicht fällt, kann man die CSS-Dateien gzippen und/oder mit einem etwas schonenderem Cache-Control-Header ausliefern. Außerdem wird ja auch Divitis die Seite auch nicht gerade kleiner – allerdings dann auch für alle User statt nur für IEler.
soophie ¶
18. April 2008, 16:05 Uhr
ich glaube dass geht hier in eine grundsätzliche Richtung. conditional comments nutze ich garnicht.ebenso wie spezielle Hacks oder dergleichen. Daher finde ich das eine div nicht so tragisch. Schlimmer finde ich die Verschachtelungen die Javascript-Bibliotheken oft mit sich bringen.
Christian ¶
18. April 2008, 16:36 Uhr
Manchmal macht ein zusätzliches DIV aber auch so alles flexibler, gerade wenn man weiß das sich die Seite schnell verändern bzw. erweitern wird.
Nehmen wir an wir haben haben eine mittlere Box mit Content, der Content darin soll 20px Abstand zum Rand der Box haben. Nun ist die Box jedoch floatender Natur und soll jeweils 60% der verfügbaren breite einnehmen.
Mit padding kommt man hier nicht weit, weil padding in diesem Fall ja jeweils auf die 60% angerechnet wird und man hier höchstens mit prozentualen Paddingwerten zum Ziel kommt.... hier ist ein zusätzliches div einfach etwas das sowohl den 100% erscheinenden IE-Bug behebt als auch zur flexibilität beiträgt.
Gruppierte Elemente wie z.B. 3 Spalten könnte man natürlich auch ohne einheitliches Elternelement einfach in den Hauptcontainer klatschen, will man jedoch die Elemente gruppiert ansprechen geht dies auch nur über das CSS, was auch wieder heißen würde man müsste jedesmal das CSS abändern wenn eine Box hinzu kommt.
Also klar, es geht immer mit minimalstem HTML und wenn ich mir meine Ergebnisse angucke sind das auch keine Divitis... aber manchmal muss man sich fragen ob jetzt ein paar Byte HTML mehr einem nicht doch ein dickes Plus an flexibilität geben und man später schneller auf Änderungswünsche reagieren kann. Lass das bei einem Layout vielleicht 3 Divs mehr sein (nicht verschachtelt)...
Und doch, meist sind es die Boxmodelbugs die im IE auftauchen, und wenn ich dann doch 1 oder 2 Hacks brauche lege ich dafür auch nicht extra ne neue css-datei an die wieder gewartet werden muss oder bei änderungen später eh vergessen wird weil man 99% der Zeit das Hauptstylesheet im Kopf hat und dann böse Anrufe bekommt warum die kürzliche Änderung jetzt im IE so komisch aussieht ;)
Also ich bin auch kein Fan von wirklich sinnlosen Divs, aber wenn man an einer Stelle ist wo man weiß das man hier später 100%ig noch irgendwas reinbauen muss das flexibilität vom Layout erwartet dann arbeite ich da lieber vorraus :)
Peter ¶
18. April 2008, 17:29 Uhr
Zitat Christian:
Wenn es nur drei unkomplizierte kleine
divsind, lohnt sich dann das vorarbeiten wirklich? Abgesehen davon, dass man vielleicht damit noch eine Stunde mehr aufschreiben kann …Daniel ¶
18. April 2008, 17:31 Uhr
Natürlich optimiere ich meine Seiten für den IE, genau wie jeden anderen Browser.
Ich code nicht aus ideelen nerdigen Gründen nur für Firefox oder Opera. Ich code für den Kunde und ich code für den Anwender und dem zwinge ich keinen Browser oder eine fehlerhafte Seite auf.
Und den umständlichen Weg über ein extra Stylesheet für den IE gehe ich auch auf keinen Fall. Ein DIV mehr ist genauso sauberes Markup wie ein DIV weniger.
Peter ¶
18. April 2008, 17:54 Uhr
Was baut ihr für seltsame Seiten, dass der IE euch nur die Margins verbockt und ihr sonst keine Sorgen (und keinen IE-Stylesheet) habt? Was ist mit Alphakanal-PNGs, Dingen die schlichtweg nicht funktionieren und im Sinne der Graceful degradation einfach nicht angezeigt werden sollen, Opacity-Ärger oder einfach seltsamem Verhalten, dass sich ohne ein wohlplatziertes
zoom:1;nicht unter Kontrolle kriegen lässt?soophie ¶
18. April 2008, 18:00 Uhr
transparente png's mache ich über filter:alpha, das ich aber im normalen css einbaue, da es sonst keinen Einfluss hat. zoom:1 hab ich noch nie verwendet. ansonsten arbeite ich mit browserweichen. bei formularfeldern oder so
Christian ¶
18. April 2008, 19:33 Uhr
Ein DIV mehr macht doch nicht mehr arbeit? Wenn man das DIV am Start wirklicht nicht brauchen sollte (was seine existenz dann aber doch in frage stellen würde) beeinflusst es ja in keinem Fall das rendering der Browser.
Alpha-PNGs löse ich über ein externes JS, zoom: 1; habe ich ebenfalls noch nicht benutzt, höchstens height: 1%; was allerdings die anderen browser auch nicht weiter juckt.
Also DIVs in Maßen gehen für mich Ok, allerdings muss man sich immer nach dem Sinn fragen, und wenn dieser im Zweifelsfall ein Plus an flexibilität bietet find ich das i.O. ich habe allerdings auch schon seiten gesehen wo man sich fragt ob die leute irgendwie nen div-flash gehabt haben.
Salz`` &else=`Salz` ¶
18. April 2008, 19:48 Uhr
Ich glaub es geht hier weniger darum das einige IE-Probleme mit nem Div und andere mit * html lösen, sondern vielmehr darum das einige sogar schon dazu neigen <div class="big"> zu schreiben, anstatt <b>/<strong>.
soophie ¶
18. April 2008, 21:31 Uhr
<strong>wäre aber richtiger, da es semantischer isterlehmann ¶
21. April 2008, 02:23 Uhr
Ich code mit XSLT, da werden die Einrückungen natürlicherweise etwas größer.