CSS: Wichtige Eigenschaften und Generische Tyen

[hmm]

Hi Leute,

ich muss für meine Prüfung die wichtigsten CSS Zeugs können.

Frage:

Font-Family: arial;

Font-family: sans-serif;

sans-serif soll der generische typ von arial sein usw.

Was genau bedeutet das und was sollte man grundlegend dazu können?

Was wäre das wichtigste zu: Display, Position, Float, Clear und Selectoren? Mir fehlt leider eine zusammenhängende Übersicht dazu, ich muss mir alles einzeln googeln. Habt ihr zufällig eine Zusammenfassung/Tabelle dazu?

[Felix Riesterer]

Lieber hmm,

Habt ihr zufällig eine Zusammenfassung/Tabelle dazu?

aber sicher doch: Übersichtsseite im Wiki zu CSS

Liebe Grüße,

Felix Riesterer.

[hmm]

sans-serif etc. bedeutet nur welche Eigenschaften die Schrift hat, richtig? D.h. sans-serif und co steht niemals in meinem CSS Code, richtig?

p { font-family: arial; }

-> Schriftart ohne Serifen/Schnörkel, mehr sagt mir der der Generische Typ nicht

[Gunnar Bittersmann]

@@hmm

sans-serif etc. bedeutet nur welche Eigenschaften die Schrift hat, richtig?

Nicht so ganz. Es geht nur um die eine Eigenschaft, keine Serifen zu haben.

D.h. sans-serif und co steht niemals in meinem CSS Code, richtig?

Falsch.

-> Schriftart ohne Serifen/Schnörkel, mehr sagt mir der der Generische Typ nicht

Weniger. Ohne Serifen heißt nicht ohne Schnörkel. Calibri bspw. bietet discretionary ligatures als OpenType feature:

LLAP 🖖

[marctrix]

Hej Gunnar,

Weniger. Ohne Serifen heißt nicht ohne Schnörkel. Calibri bspw. bietet discretionary ligatures als OpenType feature:

Der Strich am kleinen „g“ ist doch auch eine Serife?

Marc

[Gunnar Bittersmann]

@@marctrix

Der Strich am kleinen „g“ ist doch auch eine Serife?

Nein. Im Englischen sagt man dazu ear (typography terms). Beim deutschen Begriff muss ich passen. Wenn ich dran denke, frag ich bei Gelegenheit mal nach.

LLAP 🖖

[marctrix]

Hej Gunnar,

Der Strich am kleinen „g“ ist doch auch eine Serife?

Nein. Im Englischen sagt man dazu ear (typography terms). Beim deutschen Begriff muss ich passen. Wenn ich dran denke, frag ich bei Gelegenheit mal nach.

Nein danke, nicht nötig. Es gibt Dinge, die muss ich nicht wissen. 😂

Den Strich nehme ich zum ersten Mal bewusst wahr. Was Typographie betrifft, habe ich mich damit nie besonders beschäftigt. Ich nehme einfach die Behauptungen hin, die da beispielsweise sagen: Apple hat San Francisco entwickelt um insbesondere auf kleinen Bildschirmen zu verbessern. Bei der Sorgfalt, die Apple traditionell in solche Details einfließen lässt, glaube ich das einfach mal — ich bin ja kein Designer. Zwar verlangt man von mir mitunter ein Layout für Webseiten zu erstellen, aber noch musste ich keine neue Schriftart entwickeln.

Bis dahin werde ich die Beschäftigung mit diesen Details ein wenig weiter hinten anstellen. 😉

Ich will allerdings nicht arrogant oder ignorant klingen. Gute Schriften sind enorm wichtig! Und man braucht auch Namen für so etwas, um über diese Dinge reden zu können!

Marc

[Gunnar Bittersmann]

@@marctrix

Der Strich am kleinen „g“ ist doch auch eine Serife?

Nein. Im Englischen sagt man dazu ear. Den Strich nehme ich zum ersten Mal bewusst wahr.

Beim dreistöckigen g sollte der immer da sein. Bsp. Baskerville:

Im Gegensatz dazu ein zweistöckiges g (Futura):

LLAP 🖖

[Tabellenkalk]

Hallo,

Im Gegensatz dazu ein zweistöckiges g (Futura):

ö, da ist er doch auch da?! Und sollte auch immer da sein, nicht dass man denkt, es sei eine 9…

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Im Gegensatz dazu ein zweistöckiges g (Futura):

ö, da ist er doch auch da?!

Nö, er ist da jemand anderes.

LLAP 🖖

[marctrix]

Hej hmm,

sans-serif etc. bedeutet nur welche Eigenschaften die Schrift hat, richtig? D.h. sans-serif und co steht niemals in meinem CSS Code, richtig?

Nein, sans-serif ist eine Schriftangabe wie Arial — sogar die wichtigere von beiden.

Arial ist eine konkrete Schriftart, die nicht auf jedem System zur Verfügung steht. Auf Systemen ohne Arial nehmen Browser standardmäßig eine Schriftart mit Serifen, also etwas was optisch und emotional maximal weit von „Arial“ entfernt ist.

Deshalb sollte man seine Liste mit Schriftarten immer mit einer generischen Angabe abschließen, die dazu führt, dass der Browser eine im System vorhandene Schriftart ohne Serifen verwendet, wenn „Arial“ nicht vorhanden ist.

Damit dieser Fall möglichst nicht eintritt, schreibt man für gewöhnlich mehrere konkrete Schriftarten in sein CSS, zum Beispiel:

html {
  font-family: Helvetica, Arial, 'Lucida Sans', sans-serif;
}

Die erste auf dem System vorhandene Schriftart wird benutzt. In diesem Fall also Helvetica, falls vorhanden. Darum will man auch genau diese Reihenfolge (und nicht zuerst den Helvetica-Abklatsch Arial).

Die oben genannten Schriften findet man häufig auf Macs (Helvetica), Windows-PCs (Arial) und vielen Linux-Distributionen (Lucida Sans).

Ob es nun Lucida Sans sein soll oder eine andere sei mal dahin gestellt — ich weiß auch nicht aus dem Kopf, ob Lucida Sans immer mitgeliefert wird. Da sind dann ggfs. noch weitere Schriftfamilien der Liste hinzuzufügen, wenn man die Kontrolle behalten will.

An Lucida Sans lässt sich nur schön zeigen, dass Schriften, deren Namen aus mehreren Wörtern bestehen, in Anführungszeichen gesetzt werden sollten (einfache oder doppelte, beides geht).

Marc

[Orlok]

Hallo Marc

An Lucida Sans lässt sich nur schön zeigen, dass Schriften, deren Namen aus mehreren Wörtern bestehen, in Anführungszeichen gesetzt werden sollten (einfache oder doppelte, beides geht).

Warum sollte man das tun, wenn die Namen „aus mehreren Wörtern“ bestehen? Im Hinblick auf die Frage, ob ein Name in Anführungszeichen zu setzen ist, spielt es nur eine Rolle, ob es sich bei jedem Wort des Namens um einen validen Bezeichner handelt oder nicht.

html {
  font-family: Helvetica, Lucida Sans, Arial, sans-serif;
}

Es gibt keinen Grund, Namen wie eben zum Beispiel Lucida Sans, deren Worte nur aus der Zeichenklasse [a-zA-Z] bestehen, in Anführungszeichen zu setzen. Bezeichner dürfen auch Ziffern enthalten sowie Underscores und Hyphens, wobei Ziffern nicht und Hyphens nicht doppelt oder aber gefolgt von [0-9] am Anfang eines Wortes stehen dürfen.

Eigentlich ist Lucida Sans gerade ein Beispiel für einen Namen, bei dem es nicht nötig ist, ihn in Anführungszeichen zu schreiben. Ob es nötig beziehungsweise sinnvoll ist einen Namen als String zu notieren, hängt von den jeweils verwendeten Zeichen ab, nicht von der Anzahl der Worte, aus denen der Name zusammengesetzt ist.

Viele Grüße,

Orlok

[Gunnar Bittersmann]

@@Orlok

Warum sollte man das tun, wenn die Namen „aus mehreren Wörtern“ bestehen? Im Hinblick auf die Frage, ob ein Name in Anführungszeichen zu setzen ist, spielt es nur eine Rolle, ob es sich bei jedem Wort des Namens um einen validen Bezeichner handelt oder nicht.

Betonung auf „bei jedem Wort“. Lucida Sans ist nicht ein Bezeichner; es sind zwei.

Die Spec sagt: “Font family names other than generic families must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. […] If a sequence of identifiers is given as a font family name, the computed value is the name converted to a string by joining all the identifiers in the sequence by single spaces.”

LLAP 🖖

[marctrix]

Hej Gunnar,

@@Orlok

Warum sollte man das tun, wenn die Namen „aus mehreren Wörtern“ bestehen? Im Hinblick auf die Frage, ob ein Name in Anführungszeichen zu setzen ist, spielt es nur eine Rolle, ob es sich bei jedem Wort des Namens um einen validen Bezeichner handelt oder nicht.

Betonung auf „bei jedem Wort“. Lucida Sans ist nicht ein Bezeichner; es sind zwei.

Die Spec sagt: “Font family names other than generic families must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. […] If a sequence of identifiers is given as a font family name, the computed value is the name converted to a string by joining all the identifiers in the sequence by single spaces.”

Also doch Anführungsstriche! - Sorry, als Nichtprogrammierer ist mir die Konsequenz nicht ganz klar.

Marc

[Gunnar Bittersmann]

@@marctrix

Die Spec sagt: “Font family names other than generic families must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. […] If a sequence of identifiers is given as a font family name, the computed value is the name converted to a string by joining all the identifiers in the sequence by single spaces.”

Also doch Anführungsstriche!

Nein, wieso?

“either be given quoted as strings, or unquoted as a sequence of one or more identifiers”

Entweder als String in Anführungszeichen 'Calibri'/"Calibri" oder als ein identifier Calibri.

Entweder als String in Anführungszeichen 'Lucida Sans'/"Lucida Sans" oder als zwei identifier Lucida Sans.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

oder als zwei identifier Lucida Sans.

Dass das zwei identifier Lucida und Sans sind, ist der Grammatik von CSS geschuldet und hat für den täglichen Gebrauch vermutlich genausoviel Relevanz wie der Fakt, dass font-family: Lucida Sans; zwei Deklarationen sind.

(; gehört nicht mit zur Deklaration, sondern steht zwischen zwei Deklarationen. In dem Fall zwischen font-family: Lucida Sans und einer leeren Deklaration.)

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Die Spec sagt: “Font family names other than generic families must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. […] If a sequence of identifiers is given as a font family name, the computed value is the name converted to a string by joining all the identifiers in the sequence by single spaces.”

Das heißt, sowohl Matthias’ tolle Schriftart als auch Kapitälchen müssten in Anführungszeichen gesetzt werden?

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Das heißt, sowohl Matthias’ tolle Schriftart als auch Kapitälchen müssten in Anführungszeichen gesetzt werden?

Nein. Sowohl ’ als auch ä dürfen in identifiers auftreten. Die entsprechende Stelle in der Spec war doch nur einen Click entfernt.

LLAP 🖖

[marctrix]

Hej Orlok,

An Lucida Sans lässt sich nur schön zeigen, dass Schriften, deren Namen aus mehreren Wörtern bestehen, in Anführungszeichen gesetzt werden sollten (einfache oder doppelte, beides geht).

Eigentlich ist Lucida Sans gerade ein Beispiel für einen Namen, bei dem es nicht nötig ist, ihn in Anführungszeichen zu schreiben.

Interessant. In ungefähr einer Million Anleitungen habe ich das so (oder so ähnlich) wie oben geschrieben gelesen. Daher habe cih es letztendlich geglaubt, obwohl ich weiß, dass es „in Browsern“ funktioniert (habe nie getestet, ob in allen, sondern einfach die Anführungszeichen immer geschrieben).

Da ich Dir mehr vertraue, als Millionen von Anleitungen, die ihre Meinung nicht begründen (können), sondern vielleicht so wie ich übernommen haben, werde ich das zukünftig nicht mehr behaupten und etwas schlankeren Code schreiben.

Merci und ein dickes Plus!

Marc

[Gunnar Bittersmann]

@@marctrix

In ungefähr einer Million Anleitungen habe ich das so (oder so ähnlich) wie oben geschrieben gelesen.

Durchaus möglich, dass ich das früher hier im Forum auch so gesagt habe, als ich es noch nicht besser wusste.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

In ungefähr einer Million Anleitungen habe ich das so (oder so ähnlich) wie oben geschrieben gelesen.

Durchaus möglich, dass ich das früher hier im Forum auch so gesagt habe, als ich es noch nicht besser wusste.

Ich würde ja gerne sagen, wir werden ja alle klüger mit der Zeit (heute bin ich es geworden, danke dir und @Orlok)

Leider habe ich bei dem einen oder anderen Zeitgenossen, dass er sich gegen Klugheit oder auch nur Wissen aktiv wehrt.

Marc

[Gunnar Bittersmann]

@@marctrix

Leider habe ich bei dem einen oder anderen Zeitgenossen, dass er sich gegen Klugheit oder auch nur Wissen aktiv wehrt.

Die Grammatik stimmt nicht. Die Aussage stimmt.

Ich wünschte, es wäre andersrum.

LLAP 🖖

[Tabellenkalk]

Hallo,

Die Grammatik stimmt nicht. Die Aussage stimmt.

Weil die Grammatik nicht stimmt, ist die Aussage unvollständig. Du kannst über die Aussage nur spekulieren, aber nicht deren Wahrheitsgehalt beurteilen…

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Die Grammatik stimmt nicht. Die Aussage stimmt.

Weil die Grammatik nicht stimmt, ist die Aussage unvollständig. Du kannst über die Aussage nur spekulieren, aber nicht deren Wahrheitsgehalt beurteilen…

Ach was. Manchmal versteht man sich auch ohne Worte.

Manchmal auch ohne Wörter.^[1]

LLAP 🖖

---

1. Im Anfang war … der Unterschied ↩︎

[marctrix]

Hej Gunnar,

Im Anfang war … der Unterschied

In der Sprachwissenschaft gibt es keine Regeln nur Ausnahmen von Regeln 😉

Marc

[Gunnar Bittersmann]

@@marctrix

Deshalb sollte man seine Liste mit Schriftarten immer mit einer generischen Angabe abschließen

Es gibt Fälle, wo die generische Angabe nicht die letzte in der Liste ist.

An Lucida Sans lässt sich nur schön zeigen, dass Schriften, deren Namen aus mehreren Wörtern bestehen, in Anführungszeichen gesetzt werden sollten (einfache oder doppelte, beides geht).

Es geht auch ohne Anführungszeichen.

LLAP 🖖

[marctrix]

Hej Gunnar,

Es geht auch ohne Anführungszeichen.

Ich hatte Dein Zitat des Standards so verstanden, als wären die nötig?!? — Bin nun etwas verwirrt…

Marc

[Gunnar Bittersmann]

@@hmm

ich muss für meine Prüfung die wichtigsten CSS Zeugs können.

Frage:

Font-Family: arial;

Font-family: sans-serif;

sans-serif soll der generische typ von arial sein usw.

Wichtiger als das ist, dass Arial doof aussieht und sans-serif auf den meisten Systemen eine besser lesbare und besser aussehende Schrift liefert.

Was genau bedeutet das und was sollte man grundlegend dazu können?

Was man grundlegend dazu können sollte? Nach fehlenden Informationen zu suchen. Man wird sogar im hiesigen Wiki sofort fündig.

Was wäre das wichtigste zu: Display, Position, Float, Clear und Selectoren? Mir fehlt leider eine zusammenhängende Übersicht dazu, ich muss mir alles einzeln googeln. Habt ihr zufällig eine Zusammenfassung/Tabelle dazu?

Kannst du zufällig deine Hausaufgaben alleine machen? Wenn nicht, einen Nachhilfelehrer bezahlen?

LLAP 🖖

[beatovich]

sans-serif soll der generische typ von arial sein usw.

Wichtiger als das ist, dass Arial doof aussieht und sans-serif auf den meisten Systemen eine besser lesbare und besser aussehende Schrift liefert.

Genauer, es wird die vom User definierte Standard-Schriftart verwendet.

[Matthias Apsel]

Hallo beatovich,

sans-serif soll der generische typ von arial sein usw.

Wichtiger als das ist, dass Arial doof aussieht und sans-serif auf den meisten Systemen eine besser lesbare und besser aussehende Schrift liefert.

Genauer, es wird die vom User definierte Standard-Schriftart verwendet.

Genauer, es wird die vom User definierte Standard-Schriftart für serifenlose Schriften verwendet.

Bis demnächst
Matthias

[beatovich]

hallo

Hallo beatovich,

sans-serif soll der generische typ von arial sein usw.

Wichtiger als das ist, dass Arial doof aussieht und sans-serif auf den meisten Systemen eine besser lesbare und besser aussehende Schrift liefert.

Genauer, es wird die vom User definierte Standard-Schriftart verwendet.

Genauer, es wird die vom User definierte Standard-Schriftart für serifenlose Schriften verwendet.

Genauer, es wird die vom User definierte Standard-Schriftart für serifenlose Schriften für die zutreffende Zeichenkodierung angewendet.

[Gunnar Bittersmann]

@@beatovich

sans-serif soll der generische typ von arial sein usw.

Wichtiger als das ist, dass Arial doof aussieht und sans-serif auf den meisten Systemen eine besser lesbare und besser aussehende Schrift liefert.

Genauer, es wird die vom User definierte Standard-Schriftart verwendet.

Genauer, es wird die vom User definierte Standard-Schriftart für serifenlose Schriften verwendet.

Genauer, es wird die vom User definierte Standard-Schriftart für serifenlose Schriften für die zutreffende Zeichenkodierung angewendet.

Nein. Die Zeichencodierung hat mit Schriftarten nichts zu tun.

LLAP 🖖

[beatovich]

hallo

@@beatovich

sans-serif soll der generische typ von arial sein usw.

Wichtiger als das ist, dass Arial doof aussieht und sans-serif auf den meisten Systemen eine besser lesbare und besser aussehende Schrift liefert.

Genauer, es wird die vom User definierte Standard-Schriftart verwendet.

Genauer, es wird die vom User definierte Standard-Schriftart für serifenlose Schriften verwendet.

Genauer, es wird die vom User definierte Standard-Schriftart für serifenlose Schriften für die zutreffende Zeichenkodierung angewendet.

Nein. Die Zeichencodierung hat mit Schriftarten nichts zu tun.

Sag das der Firefox User-Einstellung, nicht mir.

[Gunnar Bittersmann]

@@beatovich

sans-serif soll der generische typ von arial sein usw.

Wichtiger als das ist, dass Arial doof aussieht und sans-serif auf den meisten Systemen eine besser lesbare und besser aussehende Schrift liefert.

Genauer, es wird die vom User definierte Standard-Schriftart verwendet.

Genauer, es wird die vom User definierte Standard-Schriftart für serifenlose Schriften verwendet.

Genauer, es wird die vom User definierte Standard-Schriftart für serifenlose Schriften für die zutreffende Zeichenkodierung angewendet.

Nein. Die Zeichencodierung hat mit Schriftarten nichts zu tun.

Sag das der Firefox User-Einstellung, nicht mir.

Welche meinst du?

Oder die unter Erweitert?

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Oder die unter Erweitert?

Die.
Die Zuordnung Laut – Schriftzeichen ist auch eine Kodierung. Aber natürlich meint Zeichenkodierung in diesem Zusammenhang etwas anderes.

PS: Finde den (vermeintlichen) Fehler

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

PS: Finde den (vermeintlichen) Fehler

Du hast einen hässlich aussehenden Scrollbalken auf deinem System.

Sonst noch was?

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Du hast einen hässlich aussehenden Scrollbalken auf deinem System.

Sonst noch was?

Sag bloß, du hast gewusst, dass Kannada eine Sprache ist.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Du hast einen hässlich aussehenden Scrollbalken auf deinem System.

Sonst noch was?

Sag bloß, du hast gewusst, dass Kannada eine Sprache ist.

Schon mal davon gehört, ja. Kannada ≠ Kanada.

In der Liste stehen aber keine Sprachen!

LLAP 🖖

PS: Du hast den wirklichen Fehler also nicht gefunden?

[Matthias Apsel]

Hallo Gunnar Bittersmann,

In der Liste stehen aber keine Sprachen!

Stimmt. Dort stehen Schriften.

PS: Du hast den wirklichen Fehler also nicht gefunden?

offenbar nicht.

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Matthias Apsel,

PS: Du hast den wirklichen Fehler also nicht gefunden?

offenbar nicht.

die fehlerhafte Einsortierung von Äthiopisch. Wegen Ge'ez

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

PS: Du hast den wirklichen Fehler also nicht gefunden?

offenbar nicht.

die fehlerhafte Einsortierung von Äthiopisch

… und etlicher anderer Schriften. Wie bei Hund und Katze.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

PS: Finde den (vermeintlichen) Fehler

Du hast einen hässlich aussehenden Scrollbalken auf deinem System.

Sonst noch was?

Ah ja. Ich hab ihn.

Wieso vermeintlich? Ein Fehler ist ein Fehler ist ein Fehler.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Wieso vermeintlich?

s. o.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

sans-serif soll der generische typ von arial sein usw.

Wichtiger als das ist, dass Arial doof aussieht und sans-serif auf den meisten Systemen eine besser lesbare und besser aussehende Schrift liefert.

Genauer, es wird die vom User definierte Standard-Schriftart verwendet.

Genauer, es wird die vom User definierte Standard-Schriftart für serifenlose Schriften verwendet.

Genauer, es wird meist die vom Browser definierte Standard-Schriftart für serifenlose Schriften verwendet. Die wenigsten Nutzer werden diese Einstellung ändern.

LLAP 🖖

[marctrix]

Hej Gunnar und hmm,

@@hmm

Wichtiger als das ist, dass Arial doof aussieht und sans-serif auf den meisten Systemen eine besser lesbare und besser aussehende Schrift liefert.

Ob Arial gefällt ist ja nun Geschmacksache.

Der zweite Teilsatz von @Gunnar Bittersmann ist aber besonders beachtenswert. Fast alle Anbieter mobiler und anderer Betriebssysteme ändern im Lauf der Jahre Ihre Standardschriftarten, weil es aus Sicht derjenigen, die sich den ganzen Tag mit so etwas beschäftigen Sinn macht. Da muss man schon gute Gründe haben, warum man heute etwas wie „Arial“ verwendet, was mal in den Neunzigern „hipp“ war.

Man kann in CSS übrigens auf genau diese vom System bereit gestellten Schriften zurückgreifen. Aber das wäre jetzt wohl Overkill in dem Kontext „was sind die grundlegendsten/wichtigsten CSS-Eigenschaften“.

Auch wenn ich die Aufgabenstellung für eine große Torheit rechte, denn sie lässt jede beliebige Antwort zu und kein Schüler, der irgendetwas schreibt, dürfte schlecht bewertet werden. Denn es gibt keine „offizielle Liste der wichtigsten CSS-Eigenschaften“.

Alle CSS-Module sind gleich wichtig — vielleicht mal abgesehen von denen, die (noch) von keinem einzigen Browser unterstützt werden.

Denn was wichtig ist und was nicht, bestimmt ein konkretes Projekt.

Selbst eine Formulierung wie „was sind die am meisten genutzten CSS-Eigenschaften?“ macht keinen Sinn, es sei denn, Dein Lehrkörper hat hierzu die einzig geltende und allwissende Statistik an der Hand und euch gegeben, um diese sinnloserweise auswendig zu lernen.

Was wäre das wichtigste zu: Display, Position, Float, Clear und Selectoren? Mir fehlt leider eine zusammenhängende Übersicht dazu, ich muss mir alles einzeln googeln. Habt ihr zufällig eine Zusammenfassung/Tabelle dazu?

Kannst du zufällig deine Hausaufgaben alleine machen? Wenn nicht, einen Nachhilfelehrer bezahlen?

Mir lag es auch schon auf der Zunge inhaltlich dasselbe zu äußern (vielleicht etwas netter formuliert). Mir scheint, genau darin (alles zusammenzusuchen) besteht die Aufgabe? — Aber dann habe ich gedacht, wichtig ist doch herauszufinden, wie man sich im Web Informationen beschafft und ein Forum gehört auch zum Web. — Insofern sehe ich kein Problem darin, zuerst mal zu versuchen, ob andere die Aufgabe für dich erledigen 😉

Es wäre aber besser, für die Recherche nicht google zu nutzen, die stellen unzulässige Dinge mit Deinen Daten an (siehe auch den aktuellen Facebook-Skandal, wo die Problematik von Quasi-Monopolisten mit Daten-Allmacht deutlich wird — ermöglicht von faulen Menschen, die als Rechtfertigung die Lüge verbreiten, sie hätten nichts zu verbergen).

Marc

[Gunnar Bittersmann]

@@marctrix

HDa muss man schon gute Gründe haben, warum man heute etwas wie „Arial“ verwendet, was mal in den Neunzigern „hipp“ war.

Ist „weil es die erste Schrift im Menü ist“ nicht ein guter Grund‽

Wie Erik Spiekermann sagt: „[Arial] wird genommen, weil sie im Computermenü … ganz oben steht. Würde sie Zarial heißen, hätte sie kein Mensch genommen.“ —Erik Spiekermann (Außer Banausen.)

LLAP 🖖

[hmm]

hi, danke.

.schrift {
  color: blue;
  font-size: 16px;
  text-aling: center;
  font-family: Arial, "Times New Roman", sans-serif;
}

-> wenn ich ein <p>-HTML Element damit ausstatte ist die Schrift blau, die Buchstaben haben die größe 16px, der Text ist mittig. Wenn auf dem Rechner Arial vorhanden ist, so wird der Text damit dagestellt, sollte Arial nicht vorhanden sein wird Times New Roman verwendet, sollte auch das nicht vorhanden sein, so wird die Schrift mit einer vorhandenen Nichtverschnörkelten Dingens dargestellt.

So hab ich das jetzt verstanden.

Jetzt bin ich bei Display: none, inline, block, inline-block, grid und flex. Wenn ich das richtig verstanden habe kann man mit Hilfe von Display Text/Elemente welche in einem Absatz stehen Formatieren.

.meinDisplay {
  display: none;
}

<p>
  Toller Text <h1 class="meinDisplay">Unsichtbar</h1>
</p>

Jetzt würde nur "Toller Text" angezeigt werden. Ist die Erklärung von Display so in Ordnung?

[Gunnar Bittersmann]

@@hmm

  font-size: 16px;

Nicht machen! Nicht Schriftgrößen (wie auch andere Eigenschften) in Pixel angeben, sondern relativ zur Basisschriftgröße in rem oder zur Schriftgröße des Elternelements (bei anderen Eigenschaften der des aktuellen Elements) in em angeben.

  text-aling: center;

Ich glaube nicht, dass das irgendeine Wirkung zeigt.

  font-family: Arial, "Times New Roman", sans-serif;

Da hat wohl jemand ein Kuckucksei ins Nest gelegt? Times New Roman ist keine serifenlose Schrift.

Jetzt bin ich bei Display: none, inline, block, inline-block, grid und flex. Wenn ich das richtig verstanden habe kann man mit Hilfe von Display Text/Elemente welche in einem Absatz stehen Formatieren.

Nein. Die display-Eigenschaft formatiert nicht die Inhalte darin, sondern das Element selbst.

<p>
  Toller Text <h1 class="meinDisplay">Unsichtbar</h1>
</p>

h1 darf nicht in p vorkommen.

Das aus diesem Quelltext generierte DOM sieht so aus, als wäre das HTML so:

<p>Toller Text</p>
<h1 class="meinDisplay">Unsichtbar</h1>
<p></p>

Bei Elementen, die bei allen Darstellungsarten versteckt werden sollen, gehört diese Information ins Markup, nicht ins Stylesheet. Dafür ist das hidden-Attribut da.

LLAP 🖖

[marctrix]

Hej Gunnar,

Bei Elementen, die bei allen Darstellungsarten versteckt werden sollen, gehört diese Information ins Markup, nicht ins Stylesheet. Dafür ist das hidden-Attribut da.

…das sich per CSS aber nicht entfernen, aber für Formatierungen nutzen lässt.

Wirft ein button.pressed > [hidden] {display: inline-block;} Screenreader eigentlich aus der Bahn? — Oder funktioniert das (ggfs. in Verbindung mit Live Region)?

Marc

[Gunnar Bittersmann]

@@marctrix

Wirft ein button.pressed > [hidden] {display: inline-block;} Screenreader eigentlich aus der Bahn?

Was heißt in dem Zusammenhang „aus der Bahn werfen“?

Ich würde denken, er ließt das Ding vor (ungetestet). Das sollte er jedenfalls.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Wirft ein button.pressed > [hidden] {display: inline-block;} Screenreader eigentlich aus der Bahn?

Was heißt in dem Zusammenhang „aus der Bahn werfen“?

Ich würde denken, er ließt das Ding vor (ungetestet). Das sollte er jedenfalls.

Das sehe ich (ungetest) genauso. 😂

Ich werfe mal VoiceOver an…

Marc

[Tabellenkalk]

Hallo,

er ließt das Ding vor

wer sollt vorgelassen werden?

Gruß
Kalk

[marctrix]

Hej hmm,

sollte Arial nicht vorhanden sein wird Times New Roman verwendet,

Es ist sehr unwahrscheinlich, dass eine System ohne Arial 'Times New Roman' hat, denn beide kamen mit derselben Windows-Version…

Es wäre auch nicht sinnvoll, das Fehlen einer serifenlose Schriftart mit einer Serifen-Schriftart abfangen zu wollen und dann — falls diese auch nicht vorhanden ist, wieder auf eine ohne Serifen zu schwenken…

CSS ist das der egal, daher würde ich dir prinzipiell recht geben wenn du sagst:

So hab ich das jetzt verstanden.

😀

Jetzt bin ich bei Display: none, inline, block, inline-block, grid und flex. Wenn ich das richtig verstanden habe kann man mit Hilfe von Display Text/Elemente welche in einem Absatz stehen Formatieren.

Nein. Mit display legst du genau eine Sache fest: wie soll ein Element ausgegeben werden?

Soll es sich wie eine Tabelle verhalten, wie eine Flexbox, ein Grid, ein Link, ein Listenelement… - CSS kennt ziemlich viele Darstellungsformen. 😉

Auch „gar nicht“, also none.

.meinDisplay {
  display: none;
}

<p>
  Toller Text <h1 class="meinDisplay">Unsichtbar</h1>
</p>

Nein, nciht unsichtbar, sondern „gar nicht“. Also auch nicht hörbar, also überhaupt nicht. - Ist wichtig, zum Beispiel, wenn man sich eine Webseite vorlesen lässt. Denn man kann Inhalte auch „nur“ optisch verbergen.

Allerdings nicht mittels display — auch wenn es sinnvoll und längst überfällig ist, hierfür ein standardisiertes Verfahren anzubieten.

Die derzeitigen Workarounds sind nur Hacks (prinzipiell das Verschieben von Elementen aus dem sichtbaren Bereich).

Jetzt würde nur "Toller Text" angezeigt werden.

Ja.

Aber Dein HTML ist falsch. Ein Absatz kann keine Überschriften enthalten. Könntest du mir mal beschreiben, wie das aussehen soll, wenn die h1 angezeigt wird? 😂

Ist die Erklärung von Display so in Ordnung?

s.o. 😉

Marc