Ist Ihr CSS logisch?

Sehen Sie sich dieses CSS-Snippet an. Was ist daran falsch?

p {
    border-top: 2px solid red;
    margin-left: 2rem;
    width: 80ch;
}

Abhängig von der Zielgruppe Ihrer Website gibt es entweder null oder drei Fehler. Bevor wir erklären, welche Fehler auftreten, stellen wir zunächst einen Kontext dar.

Eine Frage der Perspektive

Wenn Sie ein Boot betreten, werden Sie keine Begriffe wie „links“ oder „rechts“ hören. Das liegt daran, dass die linke/rechte Seite eines Bootes von der Perspektive des Betrachters abhängt. Stattdessen verwenden sie „Backbord“ und „Steuerbord“, eindeutige Begriffe, die sich immer auf die gleichen Seiten des Bootes beziehen, unabhängig von Ihrer Position oder der des Sprechers:

Bild erstellt von Pearson Scott Foresman und als gemeinfrei freigegeben. Quelle

Das gleiche Prinzip gilt für anatomische Ortsbegriffe, die es Ärzten und Tierärzten ermöglichen, die Lage von Körperteilen unabhängig von der relativen Position des Patienten oder Arztes eindeutig zu beschreiben.

CSS-Internationalisierung

Wenn Ihre Webanwendungen global eingesetzt werden, müssen Sie sie so gestalten, dass sie sich an verschiedene sprachliche Anforderungen anpassen. Beispielsweise werden Sprachen wie Englisch und Spanisch von links nach rechts geschrieben (LTR); Arabisch und Hebräisch werden von rechts nach links geschrieben (RTL); Mongolisch und traditionelles Japanisch werden von oben nach unten geschrieben.

Wenn Sie also eine CSS-Deklaration wie diese verwenden:

p {
    margin-left: 2rem;
}

Meinen Sie damit, dass Sie (1) links vom Absatz Platz hinzufügen möchten, oder (2) etwas Platz hinzufügen möchten, bevor der Inhalt beginnt? Für eine vollständig internationalisierte Benutzeroberfläche lautet die richtige Antwort immer (2).

Die logische Lösung

Sie können separate Stylesheets für die Sprachen LTR und RTL erstellen und diese bedingt laden. Es gibt sogar Tools wie das Webpack-RTL-Plugin, die automatisch ein RTL-Stylesheet basierend auf dem ursprünglichen LTR-Stylesheet generieren können.

Die beste Lösung wäre jedoch die bedingte Anwendung von CSS-Stilen wie folgt:

p {
    if writing is left-to-right:
        margin-left: 2rem;
    elseif writing is right-to-left:
        margin-right: 2rem;
    elseif writing is top-to-bottom:
        margin-top: 2rem;
    endif
}

Sie können dies in CSS tun, aber mit einer viel einfacheren Syntax:

p {
    margin-inline-start: 2rem;
}

Diese margin-inline-start-Eigenschaft ist eine logische CSS-Eigenschaft, die sich dynamisch an die Schreibrichtung des Benutzers anpasst. Logische Eigenschaften funktionieren ähnlich wie die Backbord-/Steuerbord-Analogie; Sie beschreiben das Layout auf eine Weise, die über verschiedene Schriftsysteme hinweg eindeutig ist.

Logische Eigenschaften definieren Layoutrichtungen mithilfe dieser beiden Begriffe:

• inline: parallel zum Textfluss innerhalb einer Zeile.
• Block: senkrecht zum Textfluss innerhalb einer Zeile.

Diese Abbildung zeigt die logischen Positionen im Vergleich zu den physischen Positionen für alle von CSS unterstützten Schreibmodi:

Unter Verwendung logischer Eigenschaften kann das am Anfang dieses Artikels gezeigte erste Beispiel wie folgt umgeschrieben werden:

p {
    border-top: 2px solid red;
    margin-left: 2rem;
    width: 80ch;
}

Das Aktualisieren eines vorhandenen CSS-Stylesheets zur Verwendung logischer Eigenschaften mag zunächst entmutigend erscheinen. Der größte Teil der Arbeit besteht jedoch darin, einfach „left“ durch „inline-start“, „right“ durch „inline-end“, „top“ durch „block-start“ und „unten“ durch „block-end“ zu ersetzen. Einige Eigenschaften erfordern eine andere Umbenennung; Beispielsweise wird der Rand-unten-links-Radius zum Rand-End-Startradius, die Höhe zur Blockgröße usw.

Der Aufwand lohnt sich, denn es handelt sich um eine zukunftssichere Lösung, die dafür sorgt, dass Ihre Website für jedermann zugänglich ist. Beispielsweise hat das EasyAdmin-Projekt, an dem ich beteiligt bin, seine Stylesheets bereits aktualisiert, um logische Eigenschaften zu verwenden.

Referenz zu logischen Eigenschaften

Hier ist eine Referenztabelle aller logischen Eigenschaften, die Ihnen bei der Aktualisierung Ihrer eigenen Projekte helfen:

Physical Property	Logical Property
border-bottom	border-block-end
border-bottom-color	border-block-end-color
border-bottom-left-radius	border-end-start-radius
border-bottom-right-radius	border-end-end-radius
border-bottom-style	border-block-end-style
border-bottom-width	border-block-end-width
border-left	border-inline-start
border-left-color	border-inline-start-color
border-left-style	border-inline-start-style
border-left-width	border-inline-start-width
border-right	border-inline-end
border-right-color	border-inline-end-color
border-right-style	border-inline-end-style
border-right-width	border-inline-end-width
border-top	border-block-start
border-top-color	border-block-start-color
border-top-left-radius	border-start-start-radius
border-top-right-radius	border-start-end-radius
border-top-style	border-block-start-style
border-top-width	border-block-start-width
bottom	inset-block-end
container-intrinsic-height	contain-intrinsic-block-size
container-intrinsic-width	contain-intrinsic-inline-size
height	block-size
left	inset-inline-start
margin-bottom	margin-block-end
margin-left	margin-inline-start
margin-right	margin-inline-end
margin-top	margin-block-start
max-height	max-block-size
max-width	max-inline-size
min-height	min-block-size
min-width	min-inline-size
overscroll-behavior-x	overscroll-behavior-inline
overscroll-behavior-y	overscroll-behavior-block
overflow-x	overflow-inline
overflow-y	overflow-block
padding-bottom	padding-block-end
padding-left	padding-inline-start
padding-right	padding-inline-end
padding-top	padding-block-start
right	inset-inline-end
top	inset-block-start
width	inline-size

Erfahren Sie mehr

• MDN: Logische CSS-Eigenschaften und -Werte

---

✨ Wenn Ihnen dieser oder meine anderen Artikel gefallen haben und Sie meine Arbeit unterstützen möchten, denken Sie darüber nach, mich auf GitHub zu sponsern?

---

Das obige ist der detaillierte Inhalt vonIst Ihr CSS logisch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!