Warum logische Eigenschaften: Internationalisierung
Verstehen Sie, warum physische CSS-Eigenschaften RTL-Layouts beeinträchtigen und wie logische Eigenschaften dies beheben.
Warum logische Eigenschaften: Internationalisierung ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Das Problem mit physischen Eigenschaften
Traditionelles CSS verwendet physische Richtungen: top, right, bottom, left. Das funktioniert für Sprachen mit Schreibrichtung von links nach rechts (LTR) wie Englisch, führt aber bei Sprachen mit Schreibrichtung von rechts nach links (RTL) wie Arabisch und Hebräisch oder bei vertikalen Schriftsystemen wie dem traditionellen Japanisch zu Problemen.
Physisch vs. logisch
Vergleichen Sie:
- Physisch: top, right, bottom, left – fest an den Bildschirm gebunden
- Logisch: block-start, block-end, inline-start, inline-end – relativ zum Schreibmodus
Block- und Inline-Achsen
Jedes Schriftsystem besitzt:
- Blockachse: die Richtung, in der Textblöcke angeordnet werden (vertikal bei LTR/RTL, horizontal bei vertikaler Schreibweise)
- Inline-Achse: die Richtung, in der Text innerhalb einer Zeile fließt (horizontal bei LTR/RTL, vertikal bei vertikaler Schreibweise)
LTR- vs. RTL-Layout
Bei LTR (Englisch) gilt: inline-start = links, inline-end = rechts. Bei RTL (Arabisch) gilt: inline-start = rechts, inline-end = links. Logische Eigenschaften passen sich automatisch an, ohne Media Queries oder JavaScript.
Die tatsächlichen Kosten physischer Eigenschaften
Eine Website, die mit physischen Eigenschaften geschrieben wurde, benötigt ein separates RTL-Stylesheet oder Überschreibungen für jede Margin-, Padding-, Border-, Positionierungs- und Textausrichtungseigenschaft, die gespiegelt werden soll. Das verdoppelt den Wartungsaufwand.
Der Schreibmodus beeinflusst die Achsen
Wenn writing-mode: vertical-rl gesetzt ist (vertikales Japanisch/Koreanisch), wird die Blockachse horizontal und die Inline-Achse vertikal. Logische Eigenschaften passen sich automatisch an.
<div class="vertical-text">縦書きテキスト Vertical Text</div>
Verwendung in modernem CSS
Alle wichtigen Browser unterstützen logische Eigenschaften. Die CSS-Spezifikation empfiehlt inzwischen, logische Eigenschaften für alle Eigenschaften zu verwenden, die sich auf eine Richtung beziehen, die sich mit dem Schreibmodus oder der Schreibrichtung ändern kann.
Praktische Auswirkungen
Eine einzelne Codebasis, die logische Eigenschaften korrekt verwendet, unterstützt LTR, RTL und vertikale Schreibweisen ohne Duplikation. Das CSS richtet sich einfach nach den Werten von direction und writing-mode am Wurzelelement.
dir="rtl" in HTML
Legen Sie die Schreibrichtung in HTML fest, nicht nur in CSS:
<div dir="rtl" lang="ar" class="rtl-demo">هذا نص من اليمين إلى اليسار</div>
Schrittweise Einführung
Sie müssen Ihr gesamtes CSS nicht auf einmal umschreiben. Beginnen Sie bei neuen Komponenten mit logischen Eigenschaften. Refaktorieren Sie im Laufe der Zeit die physischen Eigenschaften in Komponenten, die zu internationalisierungssensiblen Bereichen gehören.
Die CSS-Eigenschaft direction
Die CSS-Eigenschaft direction (ltr oder rtl) beeinflusst die Richtung des Inline-Flusses. Zusammen mit writing-mode definiert sie den vollständigen Kontext des Schriftsystems für das Element.
Schnelltest
Warum führen physische CSS-Eigenschaften wie margin-left in RTL-Layouts zu Problemen?
Zusammenfassung
Logische CSS-Eigenschaften verwenden das Block-/Inline-Modell anstelle der physischen Richtungen top/right/bottom/left. Dadurch kann ein einzelnes Stylesheet für LTR, RTL und vertikale Schriftsysteme verwendet werden. Die Eigenschaften direction und writing-mode definieren den Kontext, an den sich logische Eigenschaften automatisch anpassen.
Häufig gestellte Fragen
Ist die Lektion „Warum logische Eigenschaften: Internationalisierung“ kostenlos?
Ja — der vollständige Text von „Warum logische Eigenschaften: Internationalisierung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Warum logische Eigenschaften: Internationalisierung“?
Verstehen Sie, warum physische CSS-Eigenschaften RTL-Layouts beeinträchtigen und wie logische Eigenschaften dies beheben. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Warum logische Eigenschaften: Internationalisierung“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Warum logische Eigenschaften: Internationalisierung
- Block- und Inline-Richtungen
- Logische Eigenschaften für Margin, Padding und Border
- Logische Eigenschaften in RTL-Layouts