Share
Wir haben ein umfassendes Handbuch erstellt, mit dessen Hilfe Sie CSS erlernen können, egal ob Sie gerade erst mit den Grundlagen beginnen oder etwas weiter fortgeschrittenes CSS erkunden möchten.
Drop Caps sind eine Form der Dekoration, die manchmal am Anfang eines Textblocks verwendet wird. Der Anfangsbuchstabe ist mehrere Zeilen tief und rückt den Haupttext innerhalb dieser Zeilen ein.
Beispiel für eine Fallmütze, wie auf Das Walross 
Beispiel für eine Kappe, wie sie auf Nautilus zu finden ist Es ist eine typografische Tradition, die so alt ist wie die Geschichte des Satzes selbst. Heutzutage können wir sie mithilfe von CSS mit CSS nachahmen ::erster Brief Pseudoelement. Die Gestaltung dieses ersten Buchstabens ist jedoch notorisch unbeholfen, aber der vorgeschlagene Anfangsbuchstabe Eigenschaft zielt darauf ab, das zu beheben. Untersuchen wir, was es ist, was wir damit machen können und was wir in Zukunft erwarten können.
Beginnen wir mit einer Demo. ein Textabschnitt.
Jetzt zielen wir das erste Zeichen in diesem Absatz mit der ::erster Brief Pseudoelement. Der aktuelle Styling-Ansatz wäre, diesen Charakter mit zu schweben p :: Anfangsbuchstabe float: left; , Ziehen Sie es aus dem Fluss innerhalb des Absatzes heraus und passen Sie es dann entsprechend an:
Dies ist nicht schlecht und kann mit Zeilenhöhe, Positionierung usw. weiter angepasst werden. Es wird auch sehr gut unterstützt. Aber es ist sicherlich nicht perfekt. Um richtig genießen zu können, was uns die Kappen geben können, benötigen wir genauere Kontrolle und Flexibilität.
Das Anfangsbuchstabe Diese Eigenschaft, die derzeit vom W3C als Redaktionsentwurf diskutiert wird (etwa so früh wie möglich im Standardisierungsprozess), soll uns die genaue typografische Kontrolle geben, die wir wollen. Es wird in Kombination mit verwendet erster Brief.
Der erste Wert, den es benötigt, bestimmt die Größe des Anfangsbuchstabens in Bezug auf die Anzahl der Zeilen, die er einnimmt.
p :: Anfangsbuchstabe Anfangsbuchstabe: 3;
So sieht das aus:
Entschuldigung, hör auf damit. Die Unterstützung dafür ist immer noch sehr schlecht. Zum Zeitpunkt des Schreibens wird die obige Demo nur dann korrekt angezeigt, wenn Sie Safari OS X oder einen iOS-Browser verwenden, und nur, weil wir die Präfix-Webkit-Syntax verwenden: -Webkit-Anfangsbuchstabe: 3;
Hier sind einige Screenshots, wenn Sie nicht sehen können, was ich sehe:
Anfangsbuchstabe Demo in Safari OS X 
Anfangsbuchstabe Demo in Safari iOSDas erste, was Sie bemerken könnten, sind die verschiedenen Schriftarten. Kein Browser scheint mit Anfangsbuchstaben und Webfonts gut zu funktionieren. Alle auf Ihrem System installierten Schriftarten funktionieren einwandfrei. Sie müssen jedoch explizit deklariert werden. mit einem allgemeinen serif oder serifenlos; am Ende des Font-Stacks scheinen keine Auswirkungen zu haben. Du wirst so etwas brauchen Schriftfamilie: "meine Webschriftart", arial; um den Browser-Fallback zu schlagen.
Das zweite, was Sie sehen, ist die oberste Textzeile, die auf der rechten Seite der Seite erscheint. Dies ist ein Fehler, daher benötigen wir zunächst eine Problemumgehung. Glücklicherweise ist es möglich, die Grenzen des Anfangsbuchstabens über den Absatz des übergeordneten Absatzes hinaus zu erzwingen (wodurch dem Browser klar wird, dass die obere Zeile nicht der Breite des gesamten Containers entspricht). Ein schönes großes Rand oben Wert wird die Dinge klären:
@jensimmons hier ist der Versuch eines Nicht-Browser-Ingenieurs, zu erklären, was ich denke * passiert * Ian pic.twitter.com/tODqdaKX40
- Envato Tuts + Web (@wdtuts) 14. April 2016
Okay, lass uns weitermachen. Der zweite Wert Anfangsbuchstabe akzeptiert ist optional. Sie bestimmt, in wie vielen Zeilen der Buchstabe zum Beispiel eingeht:
p :: Anfangsbuchstabe Anfangsbuchstabe: 3 2;
Hier haben wir erklärt, dass der Brief drei Zeilen tief ist, aber nur zwei sinkt.
Dies ist als "versunkene Initiale" und nicht als echte "Fallkappe" bekannt. Hier ist wieder ein Screenshot, wenn Sie nicht das gewünschte Ergebnis sehen:
Große Drop-Caps können fantastisch aussehen, aber in einem engen Ansichtsfenster sollten Sie Drop-Caps als Teil Ihrer responsiven Typografie betrachten. Auf kleinen Bildschirmen werden Sie wahrscheinlich kleinere Körpertexte haben. Verwenden Sie daher auch eine proportionale Drop-Cap.
/ * Basisabsatzstile festlegen * / p font-size: 1em; / * Grundlegende Stile festlegen * / p :: Anfangsbuchstabe Anfangsbuchstabe: 2; Farbe: # c69c6d; Marge: 1em, 2em 0 0; / * mobile erste Medienabfrage * / @media only screen und (min-width: 800px) / * Absatzformate für größere Bildschirme festlegen * / p font-size: 1.25em; / * Sturzkappenstile für größere Bildschirme festlegen * / p :: Anfangsbuchstabe Anfangsbuchstabe: 3 2; Marge: 1em, 5em 0 0;
Auf kleineren Bildschirmen lesbar bleiben Wenn Sie diese Demos in einem nicht unterstützten Browser anzeigen, fragen Sie sich vielleicht, wie Sie das absurde Ergebnis am besten vermeiden können:
Anfangsbuchstaben, wenn nicht unterstütztWir bekommen das gesamte Styling, außer dem Zeug, das den Brief tatsächlich wie eine Mütze verhält. Mit CSS-Funktionsabfragen können Sie Ihre Stile selektiv anwenden. Wickeln Sie Ihre Drop-Cap-Stile in ein @supports Bedingung wie folgt:
@supports (Anfangsbuchstabe: 1) oder (-webkit-Anfangsbuchstabe: 1) / * Ihre Anfangsbuchstaben hier * /
Wenn Anfangsbuchstaben unterstützt werden, werden die Stile angewendet. Andernfalls werden sie nicht verwendet.
Hinweis: Nicht einmal CSS-Funktionsabfragen werden universell unterstützt, also nehmen Sie dies mit einer Prise Salz. Modernizr wäre sicherer.
Wenn Sie die Dinge noch weiter ausführen, möchten Sie vielleicht sogar die JavaScript-Füllung dropcap.js von Adobe anwenden, aber wir werden hier nicht darauf eingehen. Dudley Storey macht das in seinem Blog großartig.
Es ist sehr früh, aber Anfangsbuchstabe zeigt großes Versprechen. Achten Sie auf weitere Eigenschaften wie z Anfangsbuchstabe ausrichten, was bei nicht-römischen Alphabeten helfen wird, und Anfangsbuchstabenumbruch Dadurch wird ein enger umliegender Text möglich.
Die hier verwendeten Demos sind sehr funktional, aber stellen Sie sich die Türen zu der dekorativen Typografie vor, die sich öffnen könnte! Im Prinzip können wir viele bekannte Eigenschaften für den Anfangsbuchstaben verwenden, einschließlich:
Accentsconagua
Hintergrund-Clip Aktion?Um sich über die Fortschritte auf dem Laufenden zu halten, ist es am besten, @jensimmons zu folgen..
