Sowohl Webkit auf MacOS wie der Renderer auf Windows rendern HTML vernünftig. Ist ein Element dem Renderer unbekannt wird es als Text angezeigt. Cascading Style Sheets (CSS) beschreiben, wie etwas in einer HTML-Seite auszusehen hat und überschreiben damit die Standards der Browser-Engine.
Um HTML in einer 4D-WebArea zu nutzen, ist nicht viel CSS-Aufwand notwendig. Nur wenn ich eine Standard-Darstellung nicht will, überschreibe ich genau diese Eigenschaft mit meiner eigenen CSS-Anweisung. Es bleibt wenig, was ich tatsächlich einstellen will. CSS wird von mir bevorzugt auf HTML-Tags angewendet. Dachten Sie bisher eher an CSS-Klassen, dann sehen Sie zuerst den Vortrag von Heydon Pickering an, er hat es auf den Punkt gebracht.
Ich nehme das Beispiel einer Auswertung. Die verwendet eine HTML-Seite mit eingebetteten 4D Tags. 4D Tags sind Platzhalter, die zur Laufzeit die Feldinhalte einsetzen. Hier in einer Schleife 4DLoop über die Auswahl.
So erzeuge ich diese Seite mit 16 Ergebnis-Tabellen <table>, Tabellentitel <caption> je Tabelle mit Link <a> auf ein ausführliches PDF und die Überschrift <h3> der Sammlung. Der Fuß der Seite <footer> mit © und Datum ist merklich kleiner, farbig und mittig gesetzt.
Mein Fundament
Schrift
Die Times ist mir zu sehr Standardschrift, darum weise ich dem Tag <body> meine bevorzugte Schriftart zu. Schriften sind in CSS eine Kaskade der Präferenzen, eine Anweisung der Art: nimm die erste Schrift in dieser Liste, gibt es sie nicht, nimm die nächste, die nächste, … und ganz am Schluß setze ich sans-serif oder serif, sonst habe ich doch wieder die Times. Also hier zuerst HelveticaNeue, dann LucidaGrande, danach Arial und sollte sogar diese fehlen, falle zurück auf die sans-serif. Weil das Experimentieren Spaß macht,habe ich im Beispiel die Apple-Systemschrift in einer Liste möglicher Schreibweisen vorangestellt. Klappt eine von diesen, erscheint San Francisco, sonst geht es mit HelveticaNeue weiter.
Überschriften
Die 3. Ebene der Überschriften also <h3> möchte ich fett haben, <h1> und <h2> sind sowieso fett.
Links
Wichtig ist die Farbe für Links, das <a>-Tag. Die passe ich farblich an das Erscheinungsbild der Anwendung an, dann freut sich der Kunde.
Datenbank = Tabelle
Aus einer Datenbank entstehen viele Auswerte-Tabellen. Also investiere ich in deren Gestaltung, weil der Standard häßlich ist und Platz vergeudet. Eine Tabelle ist zum Einen sie selbst <table> und besteht zum Anderen aus Kopf <thead>, Körper <tbody> und Fuß <tfoot>. Tabellenfuß und Tabellentitel <caption> sind optional, manchmal wie hier auch der Tabellenkopf. Der Titel ist Text, also Farbe, Stil und Ausrichtung festlegen. Spannend sind die Tabellen-Zeilen <tr> und -Zellen <td>. Im Tabellenkopf sollte die Zelle eine <th> sein.
Die Stilanweisungen
Die Tabelle <table> soll die Breite ausnutzen (width: 100%), Luft zwischen Inhalt und Rand haben (padding: 3px), die Zeile braucht Platz (line-height: 30px;). Die Standard-Rahmen falte ich zusammen (border-collapse: collapse;). Einen Rahmen setzen sich die Zellen.
Im Tabellenkopf <thead> will ich fette Schrift (font-weight: bold;), alles in Großbuchstaben (text-transform: uppercase;), grauen Hintergrund (background-color: #eaeaea;), mehr Zeilenhöhe (line-height: 48px;) und den Rahmen dünn und dunklergau (border: thin solid #c3c3c3;) als den Hintergrund.
Dem Tabellenkörper <tbody> gebe ich eine kleinere Schrift font-size: 0.85em;, das ist weniger Höhe im Vergleich zum Standard von font-size: 1em;. Hier das Beispiel:
Eigentlich war es das. Doch der Wunsch nach mehr meldet sich sofort
- Zebra-Zeilen, gerade und ungerade Zeilen mit wechselndem Hintergrund,
- kleine Tabellen in einem Raster neben und untereinander
- der Fuß der Seite soll nicht neben die letzte Tabelle rutschen.
Will ich die ungeraden Zeilen anders gestalten als die geraden schreibe ich so: tbody tr:nth-child(even) und das bedeutet, von hinten nach vorne
even= das gilt für die geraden Zeilennth-child= mit dem x-ten Kind zu übersetzentbody tr= gilt für Zeilen aus dem Tabellenkörper
Im angezeigten CSS finden Sie auch die Einstellung thead tr:nth-child(odd) und können das jetzt selber lesen: ungerade Zeilen im Tabellenkopf. Easy, oder?
Ab und an halte ich mich aus Pragmatismus nicht dran, CSS nur auf HTML-Tags anzuwenden. Manchmal schreibe ich sogar align="right" in das HTML der Wertezelle, was eigentlich gar nicht geht. Zahlen müssen rechtsbündig stehen, darum lasse ich hier 5 gerade sein.
Sie finden zwei CSS-Klassen, „tagesBericht“ und „clear“. Beide <div>-Tags zugeordnet, das bedeutet Division oder „benutze-wenn-nichts-Besseres paßt“. Hier ist das <div>-Tag der Container einer Tabelle. Die Klasse „tagesBericht“ setzt die Breite des Containers auf 200 Pixel. Der Container liegt links und wehrt sich gegen den Nachbarn mit 3 Pixel Abstand außenrum. Der zweite Tabellen-Container knallt an den rechten Rand des ersten und hält 2 mal 3 Pixel Abstand zwischen beiden. Der dritte Container dann rechts des zweiten, bis der rechte Rand der WebArea erreicht ist. Mit dem nächsten Container beginnt eine neue „Zeile“. Mache ich die WebArea schmaler, wird früher eine neue Zeile aufgemacht, ziehe ich sie breiter passen mehr Container in eine Zeile. Hier das CSS:
.tagesBericht{
width: 200px;
float: left;
margin: 3px;
}
Dieses linksbündig aneinander passen der Container muß wieder aufhören, sobald alle Tabellen gelistet sind. Die nächsten Elemente will ich wieder untereinander haben. Der <footer> soll in den Fuß der Seite, auch wenn drüber rechts des letzten Containers noch Platz wäre. Meine Klasse clear hebt die Fließeigenschaften auf und both, sowohl für die Eigenschaften links- wie rechts-fließend.
.clear {
clear: both;
}
Die Klasse .clear zu nennen ist Blödsinn. Das muß ich ändern, z.B. in „genugGeflossen“. Nicht nur Groß- und Kleinschreibung ist wichtig, auch eine gescheite Nomenklatur hilft.
Beide Konzepte, linksbündige Objekte nebeneinander und dieses HTML-Snippet <div class="clear"></div> werden Sie häufig brauchen können. Denken Sie an ein Bilder-Raster, eines ohne JavaScript. Ich mag Karteikarten (cards) statt der unübersichtlichen ewig-breiten Tabellen. Selbst auf einem breiten Monitor wäre das nächste Beispiel einer Tabelle unübersichtlich. Lieber Karteikarten:
Spätestens beim Ersatz einer Tabelle durch Karteikarten, müssen Sie sich selber mit HTML und CSS bemühen. Es lohnt sich frühzeitig anzufangen, solange es noch übersichtlich ist. Bootstrappen ist nett, wenn man bereit ist, viel zu lernen. Warum dann nicht gleich die Grundlagen lernen, dauert auch nicht länger, anstatt beim nächsten Framework wieder bei Null anzufangen?
Give CSS a hug
Both Webkit on MacOS and the rendering-engine on Windows render most HTML acceptable. Unknown elements are rendered as text. Only if I’m not pleased by the standard-rendering, I’ll override that rule with CSS. This leaves relative little to be defined by me.
Some say Cascading Style Sheets (CSS) are horrible. I don’t think so! Those of us using a 4D-webarea inside a 4D-application have less demanding challenges. I prefer CSS directly defining how HTML-tags should look and behave. Did you see Heydon Pickering’s speech, I linked to? I’m with him.
Look at this report-table, a HTML-page including 4D Tags, which insert field-content at runtime.
Next the result of the expanded HTML shown above: one page containing 16 report-tables <table>, tabletitle <caption> for each table with link <a> for the complete PDF and the header of level 3 <h3> to name the report. The footer of the page <footer> contains © and date, obviously smaller, different color and centre-aligned.
My foundation
Fonts
Times-font is to much default for my liking. Therefore I set <body> to my preferred fonts. Fonts are listet as a cascade of preferences, like this: use the first font in this list, if not available, use the next, the next, … and if none is available fall back to sans-serif or serif, otherwise I’ll end up with Times. In this case I’d prefer HelveticaNeue, or LucidaGrande, less Arial and on a poorly configured system use sans-serif. Because experimenting is fun, I tried the new Apple-systemfont, in a couple of possible namings. If this is working, text will be rendered using
Headlines
I want the 3rd level headline <h3> to be bold, <h1> and <h2> are bold by default.
Links
The color of links, which is the <a>-tag, is important. To please my customer, I use a link-color from their colorscheme.
Database = Table
A database produces a lot of tables for report-purposes. Table display by default is ugly and consumes too much real estate. Table-styling needs to be enhanced. A table is for one part the <table> itself. Further a table consists of header <thead>, body <tbody> and footer <tfoot>. Footer and table title <caption> are optional, as is the table header if you like. Table title is text, which means to define color, fontstyle and adjustment. There is more to adjust concerning table-rows <tr> and -cells <td>. In table header a cell should be <th>.
My styles
This <table> will use full width (width: 100%) of the container, put in some spacing between content and borders (padding: 3px), the row needs room too (line-height: 30px;). I don’t like the default-borders, so they get collapsed (border-collapse: collapse;). The cells will define their borders.
The table header <thead> should be emphasized (font-weight: bold;), in (text-transform: uppercase;)-letters, have a grey background (background-color: #eaeaea;), more row-height (line-height: 48px;) with thin borders in darker grey (border: thin solid #c3c3c3;) than the content.
The font of table-<tbody> should use a smaller size font-size: 0.85em;, which is less than the standard font-size: 1em;. To be seen here:
That should fit. As soon as it works, the wishes come in like
- alternating row-color,
- smaller tables should be positioned in a grid, making use of full width available
- the footer of the page should not use remaining spots of the table-grid
To achieve alternating row-colores I use this statement: tbody tr:nth-child(even) which means, from right to left
even= even rows onlynth-child= for every table-row with number (even and odd as simplification)tbody tr= only true for rows of the table-body
The displayed CSS contains this definition thead tr:nth-child(odd) which you can read yourself now: true for odd-rows of table-header. Easy, or isn’t?
Sometimes pragmatism keeps me off the true way of doing things. The attribute align="right" for a value-cell does not follow the true Zen when added to an HTML-tag. Numbers need to be left-aligned, so who cares.
Then there are two CSS-classes, „tagesBericht“ and „clear“. Both attached to a <div>, which is HTML for division or container. Class „tagesBericht“ sets the width of the container to 200 Pixel, floats to the left and and keeps the neighbours 3 pixels off. The second container will be placed to the right side of the first with a distance of 2 x 3 pixel between them. The third to the right side of the second, and so on until the width of the webarea is filled. The next container will start a new grid-row. Changing the width of the webarea the containers will reflow according to this simple rule. This is part of responsive layout.
.tagesBericht{
width: 200px;
float: left;
margin: 3px;
}
As soon as the container-grid is filled I want this rule to stop. Next elements should be placed underneath. The <footer> of the page should not use leftover place inside the container-grid. My class clear ends the floating behaviour for both-directions, which means float left and float right.
.clear {
clear: both;
}
Naming a class .clear is nonsens. I need to rename that class into „noFloatingAnyMore“. Not only upper- and lowercase are important, so is proper naming.
Besides my complains about me naming this HTML-snippet <div class="clear"></div>, those grid-displays followed by clearing is a very powerful tool. Think about building a picture-grid, without the hassles of JavaScript. I like cards instead of boring, confusing and much-to-wide tables. For the next example shown it would need a really wide screen and still be confusing. So I used card-like elements:
Now, when thinking about cards yourself, you need to consider using HTML and CSS yourself. It pays starting early, while things are easy. Bootstrapping is nice, if you accept a steep learning curve. Why not invest in the basics first, same amount of investment, instead of starting at zero with any next framework?