Eine vollständige Anleitung zu CSS -logischen Eigenschaften mit Cheat Sheet

In diesem Artikel werden wir in logische CSS -Eigenschaften eintauchen. Wir werden uns ansehen, was sie sind, wie sie funktionieren und wofür sie nützlich sind. Wir bieten auch ein handliches Cheat -Blatt, damit Sie die logischen Eigenschaften der CSS problemlos mit ihren physischen Äquivalenten vergleichen können.

Auch wenn Sie selbst logische Eigenschaften nicht verwenden, ist es eine gute Idee, sich mit ihnen vertraut zu machen, da sie im Code von immer mehr Websites und Online -Demos angezeigt werden.

Zum Beispiel könnten Sie darauf stoßen:

<span>p {
</span>  <span>margin-block-start: 1em;
</span><span>}
</span>

Wenn Sie nicht mit den logischen CSS -Eigenschaften vertraut sind, bedeutet dies wahrscheinlich nicht viel für Sie. Wenn Sie weiter lesen, werden Sie bald eine logische Eigenschaft Ninja sein!

Laden Sie unsere praktischen logischen Eigenschaften PDF -Cheat Sheet herunter.

Key Takeaways

• CSS logische Eigenschaften bieten eine neue Methode zur Deklaration von Eigenschaften wie Breite, Höhe, Polsterung, Rand und Rand, basierend auf der Textrichtung anstelle der physischen Abmessungen eines Computerbildschirms.
• logische Eigenschaften sind an Änderungen in der Textrichtung anpassbar und machen sie für Websites mit mehreren Sprachversionen besonders nützlich. Sie bieten auch Vorteile für einsprachige Websites, z. Die logischen Eigenschaften von
CSS umfassen Variationen für Größe, Rand, Polsterung, Einschub (positionierte Elemente), Grenzen, Grenzradius, schwimmendes und Löschen, Textausrichtung, Größenänderung, Überlauf und Überwachungsverhalten. Jede dieser Eigenschaften hat ein logisches Äquivalent, das sich an die Textrichtung anpasst.
Textrichtung kann sowohl in HTML als auch in CSS angegeben werden. In HTML kann es mithilfe des DIR -Attributs festgelegt werden und in CSS kann es mit der Richtungseigenschaft festgelegt werden. Für vertikale Text kann die Eigenschaft Schreibmodus in CSS verwendet werden.
Browserunterstützung für CSS -logische Eigenschaften hat in den frühen 2020er Jahren rasch fortgeschritten und sie werden nun in den Hauptbrowsern stark unterstützt. Bei älteren Browsern kann es jedoch erforderlich sein, sowohl die logische als auch die physische Eigenschaft zu deklarieren.

Was sind logische Eigenschaften?

logische Eigenschaften bieten eine neue Möglichkeit, Eigenschaften wie Breite und Höhe, Polsterung, Rand, Rand, Grenzradius, Position, Schwimmer, Textausrichtung und Überlauf zu deklarieren. Traditionell wurden diese Eigenschaften in Bezug auf die physikalischen Dimensionen eines Computerbildschirms - links, rechts, oben und unten - deklariert. Die logischen Eigenschaften basieren stattdessen auf der

-Textrichtung .

Einige Sprachen laufen von links nach rechts, wie zum Beispiel Englisch. Andere rennen wie Arabisch von rechts nach links. Andere laufen manchmal von oben nach unten, wie zum Beispiel Japanisch. Viele Websites haben mehrere Versionen in verschiedenen Sprachen, wie z.

Die mit der Textrichtung verknüpften Stile bietet eine Reihe von Vorteilen, da sie sich an Änderungen in der Textrichtung anpassen und somit über alle Versionen einer Website gelten.

Textrichtung verstehen

Um den Zweck logischer Eigenschaften besser zu verstehen, müssen wir wirklich ein paar Dinge über die Textrichtung verstehen.

Wir können die Textrichtung sowohl in HTML als auch in CSS angeben.

html hat das DIR -Attribut, das angibt Basierend auf der verwendeten Sprache (Dir = "Auto"). Das DIR -Attribut kann auf das gesamte Dokument angewendet werden (die Norm, wenn das gesamte Dokument dieselbe Sprache verwendet) oder auf ein einzelnes Element.

Anstatt das DIR -Attribut in HTML zu verwenden, können wir die Richtungseigenschaft in CSS verwenden. Verwenden Sie zur Richtung: LTR und für den Text von rechts nach links, um die Richtung zu verwenden: RTL.

Es spielt keine Rolle, ob wir die Textrichtung in HTML oder CSS festlegen, obwohl es häufig empfohlen wird, das DIR -Attribut in HTML zu verwenden, da der Text sicherstellt Blatt.

Wir können auch CSS verwenden, um anzugeben, dass der Text von oben nach unten ausgeführt wird. Für vertikale Text, der von links nach rechts ausgeführt wird, verwenden wir Schreibmodus: Vertikal-LR, und für vertikale Text, der von rechts nach links ausgeführt wird, verwenden wir Schreibmodus: Vertical-Rl. (Es gibt keine DIR -Option für vertikale Text.)

In diesem Artikel werden wir uns eine Reihe von Demos ansehen, die die Auswirkungen der physikalischen und logischen CSS -Eigenschaften vergleichen. Diese Demos veranschaulichen die Textrichtung unter Verwendung eines Absatzes, der aus Emojis besteht - eine Art universelle Sprache!

In der folgenden Stift haben wir vier Kästchen, die unseren Emoji -Satz enthalten. Der erste ist auf Dir = "LTR" (der Browser-Standard), der zweite zu dir = "rtl", dem dritten zum Schreibmodus: Vertical-LR und dem vierten zum Schreibmodus: Vertical-RL.

Siehe den Stift Logische Eigenschaften: Textrichtung von SitePoint (@sinepoint) auf Codepen.

In dieser Demo können Sie sehen, wie sich die Einstellungen für die textübergreifende Richtung auf die Reihenfolge der Zeichen im Absatz auswirken.

Abgesehen davon: Sehen Sie, wie sich die Zeilen in der obigen Demo gut ausrichten? Das ist dem neuen Subgrid -Wert im CSS -Netz zu verdanken. Wir haben in unserem letzten Kurztipp mit Subgrid Zeilen mit Subgrid ausgerichtet.

Block und Inline in CSS

verstehen

Wenn CSS wächst und sich entwickelt, liegt der Fokus weniger auf Dingen, die nach links, rechts, auf und ab auf einem Bildschirm und mehr auf den Inhaltsfluss gehen. Sie können beispielsweise mit den Haupt- und Kreuzachsen in Flexbox vertraut sein, die je nach Richtung, in der Text fließt, ebenso wie die Richtung des Gittergehalts.

Der CSS -Block und die Inline -Eigenschaften werden durch die Textrichtung bestimmt. Im Bild unten variiert die Block- und Inline -Richtung je nach Richtung des Textes.

für einen Absatz, der von links nach rechts läuft, wie diese, ist die Inline -Richtung links/rechts und die Blockrichtung nach oben/nach unten.

logische Eigenschaften werden in Block- und Inline -Dimensionen festgelegt, die automatisch als Änderungen der Textanrichtung herumgetrieben werden. Dies macht sie viel anpassungsfähiger als physikalische Eigenschaften.

Inline -Start und Ende werden dadurch bestimmt, wo Text beginnt und endet, ebenso wie Start und Ende in die Blockrichtung.

sind logische Eigenschaften nur für mehrsprachige Stellen?

logische Eigenschaften sind für alle Websites nützlich. Es gibt viele Situationen, in denen einsprachige Websites von der Verwendung logischer Eigenschaften profitieren können.

Sie können beispielsweise die Textrichtung eines Elements ändern, während Sie Medien- oder Containerabfragen verwenden. Stellen Sie sich eine Überschrift mit einem linken roten Rand vor. Auf kleinen Bildschirmen könnte die Überschrift horizontal über den folgenden Absätzen sein. Auf weiten Bildschirmen können Sie die Überschrift für vertikal anzeigen. Das Bild unten zeigt, was passieren würde, wenn Sie Border-Links: 5px fest rot auf der Überschrift verwenden.

Sobald die Überschrift vertikal angezeigt wird, bleibt dieser Rand links, wenn wir sie zu Beginn des Textes höchstwahrscheinlich wollen. Mit logischen Eigenschaften können wir stattdessen angeben, dass der rote Rand am Inline-Start der Überschrift (Grenze-Inline-Start) angezeigt wird, unabhängig davon, in welcher Richtung er zeigt, und das unten abgebildete Ergebnis erzeugt.

(Sie können sich eine Live -Demo davon auf CodePen ansehen.)

Dies zeigt, wie unser Layout mit logischen Eigenschaften anpassungsfähiger ist, um sich zu ändern, ohne zusätzliche CSS für verschiedene Szenarien hinzufügen zu müssen.

Darüber hinaus werden wir sehen, dass logische Eigenschaften eine Reihe nützlicher Abkürzungen bieten, die CSS für alle effizienter machen - unabhängig davon, ob sie mit mehreren Sprachen arbeiten oder nicht.

Größe (Breite und Höhenabmessungen)

anstelle von Breite und Höhe, die auf dem physischen Bildschirm basieren, verwenden logische Eigenschaften Inline-Größe und Blockgröße. Um zu entscheiden, in welchen Setzen Sie Breite und Höhe einstellen sollen, müssen wir wissen, in welche Richtung der Text verläuft.

In der folgenden Demo wurden die Absätze in der ersten Zeile eine Blockgröße von 80px gegeben. In jedem Fall wird der 80px auf die Blockrichtung eingestellt, je nachdem, was auch immer das sein mag.

Vergleichen Sie dies mit der zweiten Zeile von Absätzen, die jeweils auf Höhe eingestellt sind: 80px. In jedem Fall wird die Höhe in Bezug auf den Bildschirm festgelegt.

Siehe den Stift Logische Eigenschaften: Größe (Breite und Höhe) nach SitePoint (@sinepoint) auf Codepen.

Andere Größeneigenschaften umfassen:

• Max-inline-Größe
• min-inline-Größe
• Max-Block-Größe
• Min-Block-Größe

Sehen Sie sich das Cheat -Blatt für alle Größenoptionen an und wie Sie sie mit jeder Textrichtung verwenden, zusammen mit Browser -Unterstützungsinformationen.

Margin

Verwenden von logischen Eigenschaften wird der Rand mit Variationen von Randinstrument und Randblock eingestellt.

Für Sprachen von links nach rechts wird der Rand-Inline-Start: 40px zu Beginn des Textes (links auf dem Bildschirm) einen Rand anwendet. Wenn dieser Rand auf der rechten Seite des Bildschirms angezeigt wird, wird dieser Rand angezeigt. Für vertikale Text wird der Rand oben angezeigt, wie in der Demo unten gezeigt.

Vergleichen Sie den Effekt des Rand-Inline-Starts, der in der ersten Zeile mit dem Rand-Links angewendet wird: 40px, der auf jeden Absatz in der zweiten Zeile in der folgenden Demo angewendet wird.

Siehe den Stift Logische Eigenschaften: Rand von SitePoint (@sinepoint) auf Codepen.

Andere Margin -Eigenschaften umfassen:

• Margin-Inline-End
• Margin-Block-Start
• Margin-Block-End
• Margin-Inline
• Margin-Block

Beachten Sie, dass Margin-Inline als Abkürzung für Rand-Links und Randrechte verwendet werden kann, was in vielen Situationen sehr praktisch ist-wie Randin-Inline: Auto.

Siehe das Cheat -Blatt für alle Randoptionen und Browser -Unterstützungsinformationen.

Polster

Verwenden von logischen Eigenschaften wird die Polsterung mit Variationen von Polsterin-Inline und Polsterblock gesetzt.

Für Sprachen von links nach rechts wird ein Padding-Block-Start: 40px auf dem oberen Ende des Textes (oben auf dem Bildschirm) die Polsterung angewendet. Wenn diese Polsterung auf eine Sprache von Recht nach links angewendet wird, wird auch oben auf dem Bildschirm angezeigt. Für vertikale Text erscheint die Polsterung links oder rechts, abhängig von ihrer horizontalen Richtung.

Vergleichen Sie den Effekt des Padding-Block-Starts in der ersten Zeile mit der Polstertop: 40px, die in der zweiten Reihe in der folgenden Demo auf jeden Absatz angewendet werden.

Siehe den Stift Logische Eigenschaften: Polsterung von SitePoint (@sinepoint) auf Codepen.

Andere Polstereigenschaften umfassen:

• Padding-Inline-Start
• Padding-Inline-End
• padding-block-end
• Padding-Inline
• Polsterblock

Beachten

Siehe das Cheat -Blatt für alle Polsteroptionen in jeder Textrichtung zusammen mit Browser -Unterstützung Details.

Einschub (positionierte Elemente)

Sind Sie auf das sehr praktische Einschub -Eigentum gestoßen? Es wird für die Positionierung von Elementen verwendet (z. B. wenn Sie Position verwenden: absolut). Zum Beispiel ist Einschub: 0 ​​ist für Top: 0 Kurzschrift; Rechts: 0; unten: 0; links: 0;.

Versuchen wir dies in unserer Emoji -Demo. Die enthaltenden Divs sind auf Position eingestellt: Relativ und die Absätze sind auf Position eingestellt: absolut. Die Absätze in der ersten Zeile sind auf das Einstock-Block-Ende: 30px eingestellt, während die in der zweiten Reihe physisch auf unten: 30px eingestellt sind.

Siehe den Stift Logische Eigenschaften: Einschub durch SitePoint (@sinepoint) auf Codepen.

Andere Eigenschaften für Einschub umfassen:

startetart
lock-block
In-Inline-Start
Inset-Inline-End
Inset-Inline

Beachten Sie die bequeme Kurzschrift, die in zwei Richtungen verwendet werden kann. (Einschaltblock: 20px entspricht dem Einschub: 20px automatisch. Siehe eine einfache Demo hier.)

Zeigen Sie die vollständige Liste der Einschubeigenschaften an und wie sie mit Textrichtung im Cheat -Blatt funktionieren.

Grenzen

Wir können mit der Grenz -Kurzform einen Rand rund um ein Element einstellen, z. B. Grenze: 5px fest Rot. Aber wenn wir nur

bestimmte Seiten eines Elements stylen wollen, haben wir uns plötzlich mit Bordertop, Border-Bottom, Border-Links und Border-Light zu tun, für die es logische Äquivalente gibt.

Grenzen sind etwas mehr involviert, da sie drei Werte umfassen - Breite (die Dicke des Randes), Stil (fest, gepunktet usw.) und Farbe.

Lassen Sie uns sehen, was passiert, wenn wir Rand-Inline-Start anwenden: 5px solide rot auf unsere Absätze, und vergleichen Sie dies mit Grenzen-Links: 5px solide rot;.

Siehe den Stift Logische Eigenschaften: Grenze von sitepoint (@sinepoint) auf Codepen.

Andere logische Eigenschaften für Rand gehören:

• Border-Inline-End
• Border-Block-Start
• Border-Block-End
• Border-Inline
• Border-Block

Beachten Sie, dass Grenzinline eine schöne Abkürzung für die Grenze ist: links und Grenzrechte im links nach rechts Fluss und Grenzblock für Grenz- und Grenzboden.

Wir können weiter in die logischen Grenzeigenschaften einblecken, um nur auf einen einzelnen Wert abzuzielen. Für die Breite haben wir diese:

• Border-Block-Start-Width
• Border-Block-End-Breite
• Border-Block-Breite
• Border-inline-Start-Breite
• Border-Inline-End-Breite
• Grenz-inline-Breite

Für Stil haben wir diese:

• Border-Block-Start-Stil
• Border-Block-End-Stil
• Border-Block-Stil
• Border-inline-Stil
• Border-Inline-End-Stil
• Border-inline-Stil

Für Farbe haben wir diese:

• Border-Block-Start-Color
• Border-Block-End-Farben
• Border-Block-Color
• Grenze-inline-startfarben
• Border-Inline-End-Farben
• Border-Inline-Farben

Schauen Sie sich das Cheat -Blatt für alle Kombinationen und Permutationen dieser Eigenschaften an, wenn sie für jede Textrichtung gelten.

Grenzradius

Wir können alle Ecken eines Elements mit dem Rand-Radius-Eigentum einen Grenzradius setzen. Wenn wir auf einzelne Ecken mit physischen Eigenschaften abzielen, überlegen wir zunächst, ob es sich oben oder unten im Element befindet und ob es sich links oder rechts vom Element befindet. Die obere linke Ecke ist also mit Border-Top-Left-Radius angegeben.

Beim Einstellen des Randradius mit logischen Eigenschaften anstelle von oberen/boft links/rechts müssen wir über Block [Start/Ende] -Inline [Start-End] nachdenken.

Das heißt, die richtige Eigenschaft für eine bestimmte Ecke auszuwählen, müssen Sie sich fragen, ob sie sich am Start oder Ende der Blockrichtung des Elements befindet und ob es sich am Anfang oder am Ende der Inline -Richtung des Elements befindet und vier mögliche Angaben gibt Optionen in der Mitte:

<span>p {
</span>  <span>margin-block-start: 1em;
</span><span>}
</span>

In der ersten Zeile der folgenden Demo setzen wir zu Beginn des Blocks einen Grenzradius von 20px und Inline-Textanweisungen mit Grenzstart-Start-Radius. Vergleichen Sie das mit Border-Top-Links-Radius in der zweiten Reihe.

Siehe den Stift Logische Eigenschaften: Grenzradius von SitePoint (@sinepoint) auf Codepen.

Hier gibt es keine besonderen Abkürzungen. Wenn Sie also zwei Ecken rund, müssen Sie so etwas tun:

-start-start-
-end-start-
-start-end-
-end-end-

Oh na! (Sehen Sie hier eine Demo davon.)

Siehe das Cheat -Blatt für alle Optionen für Grenzradius -Optionen und Browserunterstützungsinformationen. Es dauerte länger, bis logische Eigenschaften des Grenzradius von Browsern unterstützt werden, aber die Unterstützung ist jetzt gut in modernen Browsern.

schwebende und clearing

Logische Eigenschaften für Float und Clear bieten neue Optionen für die Schwebe- und Löschen eines Elements. Vor den logischen Eigenschaften waren die einzigen Optionen Schwimmer: links und float: rechts, klar: links und klar: rechts. Wo Text vertikal war, gab es keine Möglichkeit, in die gleiche Richtung wie der Text zu schweben.

Mit logischen Eigenschaften können schwebende und Löschen nun speziell in Bezug auf den Inline-Textfluss erfolgen, dank Inline-Start und Inline-End.

In der folgenden Demo wird ein Spannelement mit dem logischen Wert inline-start im Vergleich zum physischen Wert in der zweiten Zeile schwebt.

Siehe den Stift Logische Eigenschaften: Float nach sitepoint (@sinepoint) auf Codepen.

Die Inline-Start- und Inline-End-Werte gelten auch für die klare Eigenschaft. (Hier ist eine Codepen -Demo davon.)

Es ist keine logische Alternative für klar: beides erforderlich, da sie bereits in beiden Inline -Richtungen löscht - was ziemlich logisch ist!

Textausrichtung

Wir haben bereits Textausrichtungswerte wie links, rechts, zentral und rechtfertigen. Zwei logische Werte wurden jetzt ebenfalls hinzugefügt: Start und Ende. Sie können verwendet werden, um Text entlang der Inline -Achse auszurichten, egal in welcher Richtung sie läuft.

In der folgenden Demo wurden die Absätze in der ersten Zeile auf Text-Align: Ende eingestellt. Wie Sie sehen können, werden die Emojis alle bis zum anderen Ende der Inline -Achse gedrängt.

Siehe den Stift Logische Eigenschaften: Textausrichtung von SitePoint (@sinepoint) auf Codepen.

Das Cheat -Blatt zeigt, wie Sie Start- und Endwerte anwenden, um mit den verschiedenen Textanweisungen zu arbeiten.

Größe

Die Größe der Größeneigenschaft ermöglicht die Änderung bestimmter Elemente in bestimmten Richtungen, und jetzt gibt es Inline- und Blockoptionen.

Die folgende Demo zeigt den Unterschied zwischen der Größe der Größe: Inline und Größe: Horizontal. (In der unteren rechten Ecke jeder Box befindet sich ein winziges Größengriff, den Sie ziehen können.)

Siehe den Stift Logische Eigenschaften: Größe von SitePoint (@sinepoint) ändern auf Codepen.

(In der obigen Demo ist die Größenänderung für das Feld von rechts nach links ein bisschen wild, weil Dir = "RTL" nicht auf das gesamte Dokument angewendet wird, sondern nur auf die enthaltende Div.)

Überlauf

Die physikalischen Eigenschaften von Überlauf-X und Überlauf haben jetzt logische Ergänzungen der Überlaufinklanuelle und Überlaufblocks.

Beachten Sie, dass diese neuen Immobilien zum Zeitpunkt des Schreibens nur sehr wenig unterstützt werden (April 2024). Überwachungsverhalten

Das Überwachungsbesitz ist neu, das die Überfüllung von Elementen verfeinert. Wir werden hier nicht eingehen, aber Sie können mehr über MDN lesen.

genügt zu sagen, dass es logische Versionen dieser Eigenschaften sowie physisch gibt. Zum Beispiel können Überwachungs-Verhaltens-X für links nach rechts Sprachen durch Überwachungsverhaltens-Inline und so weiter ersetzt werden. (Weitere Beispiele finden Sie im Cheat Sheet.)

Browserunterstützung

Browser -Unterstützung für CSS -logische Eigenschaften, die Anfang 2020 rasch vorgegangen sind, und logische Eigenschaften werden nun in den Hauptbrowsern stark unterstützt.

logische Eigenschaften haben das gleiche Gewicht wie ihre physischen Gegenstücke. Wenn Sie also Sorgen über die Erfahrung in älteren Browsern machen, können Sie zwei Werte wie SO deklarieren:

Ältere Browser verwenden die erste Erklärung, während neuere die zweite verwenden.

<span>p {
</span>  <span>margin-block-start: 1em;
</span><span>}
</span>

Es wäre jedoch mühsam, so diesen in einem Stilblatt zu duplizieren. Wenn Sie also wirklich besorgt über ältere Browser sind, sollten Sie sich vorerst logische Eigenschaften leicht machen.

caniuse verfügt über einen Überblick über die Unterstützung der logischen Eigenschaften, und jeder Abschnitt im Cheat -Blatt enthält auch Links zur Unterstützung bestimmter Eigenschaften.

Schlussfolgerung

In diesem Artikel haben wir fast jede logische Eigenschaft, die derzeit verfügbar ist, abgelegt. (Sie können auch logische Eigenschaften für die Bildunterschrift und die Größenbeschäftigung überprüfen, wenn Sie weiter gehen möchten.)

Wenn nichts anderes, lohnt es sich, zu verstehen, welche logischen Eigenschaften sie sind und wie sie verwendet werden sollen, auch wenn Sie sie vorerst nicht verwenden möchten. Zumindest verstehen Sie den neuen CSS -logischen Eigenschaftscode, der jetzt im gesamten Web erscheint.

logische Eigenschaften bieten Vorteile, auch wenn Sie nicht an mehrsprachigen Websites arbeiten. Die verschiedenen Abkürzungen wie Rand-Inline sind sehr nützlich und schöne Werkzeuge in Ihrem Kit.

Wenn Sie diesen Artikel richtig durchlesen haben, sollten Sie in der Lage sein, logische Eigenschaften zu erkennen, wo immer sie erscheinen. (Achten Sie auf diese Block- und Inline -Schlüsselwörter!) Hoffentlich sind Sie auch zuversichtlich genug, sie gelegentlich in Ihrem CSS zu verwenden - es sei denn

Vergessen Sie nicht, unsere praktischen logischen Eigenschaften PDF -Cheat -Blatt herunterzuladen.

Das obige ist der detaillierte Inhalt vonEine vollständige Anleitung zu CSS -logischen Eigenschaften mit Cheat Sheet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!