Diese Art von Zusammenfassungen fasziniert mich immer. Meine Frau blättert stundenlang durch Zillow-Fotos von Innenräumen von Häusern, weil sie gerne sieht, wie verschiedene Leute dekorieren, Feng Shui oder was auch immer. Das ist ihr kleiner Ausflug ins Voyeur-Land. Meiner? Das könnte leicht das Scrollen durch CSS-Snippets sein, die Entwickler griffbereit aufbewahren.
Alvaro war so nett, die vertrauenswürdigsten seiner vertrauenswürdigen CSS zu teilen.
- Begrenzen Sie die Inhaltsbreite innerhalb des Ansichtsfensters
- Erhöhen Sie die Schriftgröße des Haupttextes
- Erhöhen Sie den Zeilenabstand zwischen Textzeilen
- Begrenzen Sie die Breite von Bildern
- Begrenzen Sie die Textbreite innerhalb des Inhalts
- Schriftarten für Überschriften ausgewogener umbrechen
- Formularsteuerelementfarben passend zu den Seitenstilen
- Leicht verständliche Tabellenzeilen
- Abstände in Tabellenzellen und Überschriften
- Animationen und Bewegungen reduzieren
Ich werde die Snippets hier nicht einfügen (es lohnt sich, den vollständigen Beitrag zu lesen). Aber ich habe ein paar eigene, die ich hinzufügen würde. Und wie Alvaro eingangs zu seiner Liste sagt, werden nicht alle davon zu 100 % auf jedes Projekt anwendbar sein.
Globale Border-Box-Größen
Keine Erklärung nötig. Es ist oft das allererste, was in jedem Stylesheet im Web deklariert wird.
*, *::before, *::after {
box-sizing: border-box;
}Ich vermute, Alvaro benutzt das auch, und vielleicht ist es zu offensichtlich, um es aufzulisten. Oder vielleicht ist es eher eine DX-Verbesserung, die eher in ein Reset gehört, als etwas, das die Website verbessert.
Systemschriften
Standardtext im Web ist einfach so… so… so langweilig. Ich liebe es, dass Alvaro zustimmt, dass 16px viel zu klein ist, um die Standard-font-size des Webs für Text zu sein. Ich würde das noch einen Schritt weiter gehen und auch die Times New Roman-Standardschrift ausradieren. Ich bin sicher, es gibt Websites, die sie nutzen (ich habe es auf meiner eigenen persönlichen Website jahrelang als Akt brutaler Minimalismus getan), aber eine persönliche Vorliebe heutzutage ist die Standardeinstellung auf die jeweilige OS-Standardschrift.
body {
font-family: system-ui;
}Wir können etwas meinungsfreudiger sein, indem wir auf eine Standard-Serif- oder Sans-Serif-Schrift zurückgreifen.
body {
font-family: system-ui, sans-serif;
}Es gibt sicher viel, viel robustere Ansätze, aber diese Basis ist ein guter Ausgangspunkt für fast jede Website.
Horizontalen Überlauf vom <body> abschneiden
Oh Gott, diesen Fehler mache ich nie, nie. 😝
Aber hypothetisch, wenn ich es täte – und das ist ein GROSSES Wenn – dann möchte ich verhindern, dass es das Scroll-Erlebnis eines Besuchers beeinträchtigt. Sobald die intrinsische Breite des <body> über das Ansichtsfenster hinaus gezwungen wird, erhalten wir eine horizontale Scrollleiste, die sehr cool sein könnte, wenn sie beabsichtigt ist, aber nicht so gut ist, wenn sie es nicht ist.
body {
overflow-x: hidden;
}Ich werde das als Abwehrmaßnahme verwenden, möchte mich aber nie auf eine tatsächliche Lösung für den möglichen Datenverlust verlassen, der mit überlaufendem Inhalt einhergeht. Dies maskiert lediglich das Problem und bietet die Möglichkeit, die Ursache zu beheben, ohne dass Besucher mit den gerenderten Folgen umgehen müssen.
Dem <body> etwas Freiraum geben
Nicht zu viel, nicht zu wenig, sondern genau die richtige Menge, damit der Inhalt nicht bis zum Rand klebt.
body {
padding-block: 15px;
}
bezüglich Globale Border-Box-Größen Ich bevorzuge
So können Sie
border-boxbei Bedarf oder von Drittanbietern überschreiben. Es war nicht meine Idee, ich habe vergessen, wo ich es zuerst gesehen habe, aber ich denke, es ist eine geringfügig bessere Lösung.Vielleicht von hier?
Sollte ich meinen Einzeiler für „responsive Images“ ein für alle Mal ändern? Von
img { width:100%; height:auto; }
Zu
img { max-width:100%; }