CSS Tips And Tricks 2 | I Wish Somebody Told Me Before

Summary

In diesem Video teilt der Sprecher nützliche CSS-Tipps für Frontend-Entwickler. Er erklärt den Unterschied zwischen dem universellen Selektor, dem HTML- und dem Body-Tag und zeigt, wie sie auf eine Webseite angewendet werden. Zudem werden praktische Techniken wie das Scroll-Snapping, die Verwendung von REM anstelle von Pixeln und das Erstellen von Zählern in CSS ohne JavaScript behandelt. Abschließend zeigt er, wie man die Reihenfolge von Flexbox-Elementen einfach mit der 'order'-Eigenschaft anpassen kann. Ein informatives Video für Entwickler, die ihre CSS-Kenntnisse erweitern möchten.

Takeaways

• 🌍 Der universelle Selektor ist kein Elternteil des HTML-Tags, sondern wählt alle Elemente im Dokument aus.
• 🖥️ Die Hintergrundfarbe kann sowohl dem HTML- als auch dem Body-Tag zugewiesen werden, hat jedoch unterschiedliche Auswirkungen auf die Größe und Abdeckung.
• 🔍 Body-Tags decken nicht automatisch das gesamte Viewport ab; sie passen sich dem Inhalt an.
• 📏 Die Verwendung der Eigenschaft `box-sizing: border-box` hilft, die Größe eines Elements bei der Berechnung von Padding und Rand zu kontrollieren.
• ✂️ Der universelle Selektor kann verwendet werden, um Standardmargen und -abstände von HTML-Elementen wie Listen und Überschriften zu entfernen.
• 📏 Die Verwendung von `rem` statt `px` für Schriftgrößen ist besser für die Skalierung auf verschiedenen Bildschirmen, da `rem` auf der Schriftgröße des Root-Elements basiert.
• 🧮 Der Trick, die globale Schriftgröße auf 62,5% zu setzen, erleichtert die Umrechnung von Pixelwerten in `rem`.
• 📜 Mit CSS-Countern kann man Zähler für Elemente erstellen, ohne JavaScript zu verwenden, z.B. für automatische Kapitelnummerierungen.
• 📋 Die Verwendung der Scroll-Snap-Eigenschaft ermöglicht das Scrollen mit automatischem Einrasten an bestimmten Stellen auf der Seite.
• 🧩 Flexbox-Elemente können mithilfe der `order`-Eigenschaft neu angeordnet werden, ohne das HTML-Dokument zu ändern.

Q & A

Was ist der Unterschied zwischen dem HTML-Tag und dem Body-Tag?

Der HTML-Tag umfasst das gesamte Dokument, während der Body-Tag den sichtbaren Inhalt darstellt. Der HTML-Tag bestimmt allgemeine Strukturen und Attribute, aber der Body-Tag ist spezifisch für den Inhalt, den der Benutzer sieht.

Warum ändert sich die Größe des Body-Tags manchmal nicht sichtbar?

Die Größe des Body-Tags wird durch den Inhalt bestimmt. Wenn der Inhalt klein ist, bleibt der Body ebenfalls klein, auch wenn die Hintergrundfarbe sich auf den gesamten Viewport ausdehnt, was ein Standardverhalten von CSS ist.

Was bewirkt der universelle CSS-Selektor (*)?

Der universelle Selektor (*) wendet Stile auf alle Elemente im Dokument an. Dies ist nützlich, um Standardeigenschaften wie Margin und Padding zu entfernen, die von HTML-Elementen geerbt werden.

Warum ist die Verwendung von 'box-sizing: border-box' sinnvoll?

'box-sizing: border-box' stellt sicher, dass Padding und Rahmen in die Gesamtabmessungen eines Elements einbezogen werden. Ohne diese Eigenschaft würden Padding und Rahmen die Gesamtgröße eines Elements erhöhen.

Wann ist es besser, keine globalen Margen- und Polsterstile zu verwenden?

Wenn man an einem Projekt wie einer Blogseite arbeitet, auf der viele Textabsätze, Überschriften und Listen vorkommen, kann das Entfernen von globalen Margen und Polstern zu unerwarteten Problemen führen. Es ist besser, Stile selektiv anzuwenden.

Warum sollte die Schriftgröße in rem anstelle von Pixeln angegeben werden?

Die Verwendung von rem anstelle von Pixeln ermöglicht es, die Schriftgröße dynamisch anzupassen, je nach den Browsereinstellungen des Benutzers. Dies verbessert die Barrierefreiheit und ermöglicht es den Nutzern, die Schriftgröße nach Bedarf zu skalieren.

Wie wird der rem-Wert einfach berechnet?

Durch die Umstellung der Standardgröße im HTML-Tag auf 62,5% kann man 1 rem als 10 Pixel definieren. Dies vereinfacht die Berechnung von Schriftgrößen, da 2 rem beispielsweise 20 Pixel entspricht.

Was ist der Vorteil der Scroll-Snap-Eigenschaft in CSS?

Mit 'scroll-snap' kann man ein sanftes, automatisches Scroll-Verhalten definieren, bei dem der Inhalt zu einem bestimmten Punkt springt, sobald der Benutzer die Scroll-Bewegung beendet. Dies ist nützlich für ein organisiertes und benutzerfreundliches Scroll-Erlebnis.

Wie kann man mit CSS eine Zählung ohne JavaScript erstellen?

Mit 'counter-reset' und 'counter-increment' können Zähler in CSS erstellt werden. Diese werden mit dem 'before'-Pseudoelement verwendet, um automatisch nummerierte Listen oder Sektionen zu generieren.

Wie kann man das Layout von Flexbox-Elementen mithilfe der 'order'-Eigenschaft ändern?

Mit der 'order'-Eigenschaft kann man die Reihenfolge von Flexbox-Elementen ändern, ohne die HTML-Struktur zu verändern. So lassen sich bestimmte Elemente in der Anzeige priorisieren.