2020 brachte eine weitere Welle von logischen Eigenschaftsfunktionen in die großen Browser und ich habe meine Investition in logisches, statt physisches, Webdesign sehr genossen. Ich habe das Gefühl, eine neue Art und Weise gelernt zu haben, über das Box-Modell zu sprechen, die zu weniger geschriebenem Code mit mehr globaler Abdeckung führt.
p {
/* 🚫 */ text-align: left;
/* 👍 */ text-align: start;
/* 🚫 */ margin-top: 1rem;
/* 👍 */ margin-block-start: 1rem;
}Wie ich im oben verlinkten web.dev-Artikel beschrieben habe, ist eine logische Eigenschaft eine, die sich auf eine Seite, eine Ecke oder eine Achse des Box-Modells im Kontext der geltenden Sprachrichtung bezieht. Es ist vergleichbar mit dem Verweis auf den starken Arm einer Person, anstatt anzunehmen, es sei ihr rechter Arm. „Rechts“ ist eine physische Armreferenz, „stark“ ist eine logische Armreferenz, kontextbezogen auf die Person.
Sobald ich den Dreh mit der aktualisierten Syntax raushatte, erkannte ich, dass andere Orte auf der Welt ihre Probleme bereits ähnlich gelöst hatten! Das Web war einfach spät dran mit der logischen Fachsprache. Hier sind ein paar andere Orte, die bereits logisch geworden sind.
Nautische Orientierung
Backbord und Steuerbord sind logische Seiten des Schiffes, die kontextbezogen zum Schiff sind. Ich liebe es, wie Wikipedia selbstbewusst sagt
… nautische Orientierungsbegriffe befassen sich eindeutig mit der Struktur von Schiffen und beziehen sich jeweils auf die linke und rechte Seite des Schiffes, gesehen von einem Beobachter an Bord des Schiffes, der nach vorne blickt.“
Schiffszentrierte logische Eigenschaften. Bei der Arbeit mit Schiffen eine Schiffssprache verwenden.
Skifahrer & Bühnen
Linker Skifahrer ist eine logische Richtung, die auf einem Skifahrer basiert, der den Berg hinunterblickt. Ohne die logische Sprache verwirrten sich die Skifahrer mit links und rechts, da es davon abhing, wo sie standen, wenn sie die Richtung angaben. Wenn Sie in einem Sessellift sitzen und bergauf schauen, ist links rechts und rechts links, sobald Sie aussteigen und den Berg wieder hinunterfahren. Also kam diese Community auf eine logische Art, über die Richtung zu sprechen. Ihre Terminologie „Skifahrer rechts“ und „Skifahrer links“ sind im Wesentlichen kontextbezogene logische Eigenschaften. Bei der Arbeit mit Skifahrern eine Skifahrersprache verwenden.
Ähnlich verwenden Filmstudios Begriffe wie „Bühne Eins“ und „Kamera Zwei“. Es hilft, alle logisch auf Basis eines gemeinsamen Verständnisses zu orientieren, nicht einer relativen Richtung.
Logische Schlussfolgerung
Als Industrie oder Gemeinschaft hatten wir Probleme mit physikorientierten Stilen. Das Hinzufügen von Padding auf der linken und rechten Seite eines Buttons passt nur in einigen Sprachen. Es ist, als hätten Sie das Padding geschrieben, während Sie auf dem Schiff falschherum standen. Logische Eigenschaften, über inline-start und inline-end, passen zu allen Sprachen. Es spielt keine Rolle, in welche Richtung Sie auf dem Schiff blicken, es geht nicht mehr um Sie.
Probieren Sie logische Eigenschaften im folgenden Pen aus. Beachten Sie, dass der Browser viel Arbeit leistet, um Ihre Inhalte weltweit lesbar zu halten. So genial.
button {
padding-block: 1ch;
padding-inline: 2ch;
border-inline: 5px solid var(--brand-1);
}Um die Zuversicht zu emulieren, die Wikipedia bei nautischen logischen Richtungen hatte: Wir, das Web, können nun eindeutig mit der Struktur unserer Boxen umgehen, indem wir uns jeweils auf ihre Seiten beziehen, kontextbezogen zur Sprachrichtung. Beschreiben Sie die Seite einmal, auf eine Weise, die für Sie immer noch relevant ist, aber jetzt auch für alle anderen relevant ist. Denken Sie weniger, liefern Sie mehr.
p {
max-inline-size: 50ch;
margin-block: 1rem;
}Es ist für mich von entscheidender Bedeutung, dass logische Eigenschaften um Menschen zentriert sind. Es ist benutzerzentriert, weil es sprachrichtungsbezogen ist. Durch die Verwendung logischer Eigenschaften laden wir den Einzelnen ein, seine Vielfalt, Komplexität und Unvorhersehbarkeit einzubringen; wir können sie annehmen und uns darauf verlassen, dass die Browser-Engines sie richtig darstellen.
hr {
max-inline-size: 30ch;
margin-inline: auto;
border-block-start: 1px solid hsl(2rad 20% 20% / 20%);
}Verabschieden Sie sich vom „Top“- und „Left“-Denken und beginnen Sie, logisch mit „Block“- und „Start“-Eigenschaften zu denken. Bei der Arbeit mit Web-Boxen eine Web-Box-Sprache verwenden.
Das „magische Papier“ des Webs ist jetzt noch magischer, da es für den Benutzer so natürlich wie möglich bleiben kann. Ich liebe es.
PS. Sie werden seit Flexbox mit logischen Eigenschaften trainiert.