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.

Outlines

00:00

🔧 Einführung in den universellen, HTML- und body-Selektor

In diesem Abschnitt erklärt der Sprecher die Unterschiede zwischen dem universellen Selektor (*), dem HTML-Tag und dem body-Tag in CSS. Es wird beschrieben, wie man den Hintergrund eines Elements definiert und die unterschiedlichen Auswirkungen der Hintergrundfarbe auf HTML und body demonstriert. Wichtig ist hier das Verständnis, dass die body-Größe vom maximalen Inhalt abhängt, während HTML nicht die gesamte Ansicht abdeckt, was häufig zu Missverständnissen führt. Ein häufiges Problem besteht darin, dass Entwickler globale Styles nicht richtig anwenden und später auf Probleme stoßen. Der Abschnitt behandelt außerdem das Entfernen von Standardmargen und -abständen bei Elementen mithilfe des universellen Selektors und zeigt, wie box-sizing: border-box verwendet wird, um die Größenberechnung zu optimieren.

05:03

🌀 Scroll-Snap-Effekte und flexible Fontgrößen

Dieser Abschnitt führt in das Erstellen eines Scroll-Snap-Effekts ein, bei dem sich der Bildlauf automatisch an vordefinierte Positionen ausrichtet. Der Sprecher erklärt, wie man Abschnitte erstellt, die den gesamten Viewport einnehmen, und wie man das Scroll-Verhalten zwischen den Abschnitten mit scroll-snap-type (mandatory oder proximity) steuert. Außerdem wird der Vorteil von rem gegenüber Pixel als Einheit für die Schriftgröße erläutert. Es wird gezeigt, wie man rem leichter berechnen kann, indem man die Standardgröße des HTML-Tags auf 10 Pixel setzt, wodurch die Umrechnung von Pixel zu rem einfacher wird.

10:08

📑 CSS-Zähler und das Order-Property für Flexbox

Hier wird erklärt, wie man mithilfe von CSS einen Zähler erstellt, um nummerierte Überschriften ohne JavaScript zu generieren. Der Sprecher beschreibt die Verwendung von counter-reset, counter-increment und der before-Pseudoklasse, um automatisch Kapitelnummern zu erzeugen. Anschließend wird das order-Property für Flexbox vorgestellt, das es ermöglicht, die Reihenfolge von Elementen innerhalb eines Containers flexibel zu ändern. Der Abschnitt endet mit einem Hinweis auf den Abschluss des Videos und den Verweis auf die vorherigen und kommenden Teile der Serie.

Keywords

💡Universalselektor

Der Universalselektor in CSS ('*') wählt alle Elemente eines Dokuments aus. Im Video wird erklärt, wie dieser Selektor verwendet wird, um globale Stile wie 'margin' und 'padding' auf alle Elemente anzuwenden. Dies ist besonders wichtig, wenn bestimmte HTML-Elemente standardmäßige Stile haben, die nicht vom übergeordneten Element geerbt werden.

💡HTML-Tag

Der HTML-Tag ist das oberste Element jeder HTML-Datei und enthält den gesamten Inhalt der Webseite. Im Video wird gezeigt, wie man ihm eine Hintergrundfarbe gibt und wie sich das auf die Größe des Tags auswirkt, wobei erklärt wird, dass der HTML-Tag nicht das gesamte Viewport abdeckt.

💡Body-Tag

Der Body-Tag enthält den Hauptinhalt einer Webseite. Im Video wird der Unterschied zwischen dem HTML- und dem Body-Tag hinsichtlich der Darstellung von Hintergrundfarben und der Größe im Viewport hervorgehoben, und wie die standardmäßige Höhe des Body-Tags durch den Inhalt bestimmt wird.

💡Box-Sizing

Die 'box-sizing'-Eigenschaft in CSS legt fest, wie die Gesamtgröße eines Elements berechnet wird. Im Video wird erklärt, dass durch die Einstellung auf 'border-box' die Größe eines Elements inklusive Padding und Border gemessen wird, was die Berechnung der Gesamtgröße erleichtert.

💡Scroll-Snap-Effekt

Der Scroll-Snap-Effekt ermöglicht es, dass ein Element beim Scrollen automatisch an einer bestimmten Position einrastet. Das Video zeigt, wie man diesen Effekt mit CSS für Abschnitte einer Webseite erstellt und erklärt den Unterschied zwischen den Modi 'mandatory' und 'proximity'.

💡REM-Einheit

REM ist eine relative Maßeinheit in CSS, die auf der Schriftgröße des HTML-Tags basiert. Im Video wird gezeigt, warum es besser ist, REM anstelle von Pixeln zu verwenden, da sich die Schriftgröße an die Benutzereinstellungen anpasst und so die Barrierefreiheit verbessert wird.

💡Counter-Funktion

Die 'counter'-Funktion in CSS ermöglicht es, automatisch nummerierte Listen oder Abschnitte ohne JavaScript zu erstellen. Das Video demonstriert, wie man mit dieser Funktion Abschnitte automatisch nummeriert, indem ein Zähler definiert und durch CSS erhöht wird.

💡Order-Eigenschaft

Mit der 'order'-Eigenschaft in CSS können Elemente innerhalb eines Flexbox-Containers in einer anderen Reihenfolge dargestellt werden als sie im HTML-Code definiert sind. Im Video wird gezeigt, wie man die Reihenfolge der Boxen mithilfe der 'order'-Eigenschaft ändern kann.

💡Viewport

Der Viewport ist der sichtbare Bereich einer Webseite im Browser. Im Video wird der Zusammenhang zwischen den HTML- und Body-Tags sowie deren Größe im Verhältnis zum Viewport erläutert, insbesondere wenn es um die Anwendung von Hintergrundfarben geht.

💡Overflow

Die 'overflow'-Eigenschaft in CSS steuert, wie der Inhalt angezeigt wird, wenn er den Bereich seines Containers überschreitet. Das Video zeigt, wie man einen Scroll-Container erstellt, indem man 'overflow: scroll' oder 'overflow: auto' verwendet, um einen scrollbaren Bereich zu erzeugen.

Highlights

Explanation of the universal selector, HTML tag, and body tag, and how they differ in defining styles.

Understanding the role of the body element, which covers the viewport, but its height equals the content size.

Clarification of the HTML and body elements' sizes not covering the full viewport by default.

Demonstration of the background color behavior, showing how it's propagated even though the element's size doesn't change.

The importance of the universal selector in resetting default margins and paddings for all elements.

Explaining box-sizing: border-box and how it impacts the total size of an element, including padding and borders.

The importance of carefully using the universal selector depending on the project, particularly for designs with complex text elements.

Introduction of scroll snapping, where each section snaps into place as the user scrolls, using CSS properties like `scroll-snap-align`.

The difference between `scroll-snap-type: mandatory` and `proximity`, affecting the snapping behavior.

The benefits of using rem units over fixed pixel values for font sizes, particularly for responsiveness across different devices.

Simplifying rem unit calculations by setting the global font size to 62.5%, making 1 rem equal to 10 pixels.

Demonstration of CSS counters to automatically number sections without using JavaScript.

How to reorder flexbox items using the `order` property for flexible layout adjustments.

Overview of best practices for applying background colors and ensuring styles don't interfere with nested elements.

Final encouragement to explore CSS more deeply and to continue watching the video series for additional tips.

Transcripts

Hello friends. Today, I’ll share some other CSS  tips that every front-end developer should know.

Firstly, I want to talk about the universal  selector, the HTML tag, and the body tag.

These elements are familiar to most  web developers, and we all use them  

to define our default background  color, text color, and font family,  

but understanding their roles and  differences can be a bit confusing.

So, let’s clarify their  purposes using this HTML file.

I’m going to write a text here.

And now, I want to give a  background color to my website.

But which element should I use?

Let’s give a background color here.

Okay. It works.

Now, I’m going to comment this out and  give a background for the HTML tag.

Again, this is what we want.

And if I do the same thing for the  body tag, you’ll see it also works.

You might think it doesn’t matter  where we use the global styles,  

but if you don’t understand the difference,  it might cause some problems in the future.

In the example, you can say the body  element covers all the viewport.

Let’s give this background again  for the HTML and see what happens.

As you realize,  

the body height equals the maximum content size.

I didn’t change any size here,  but the body tag is smaller now.

Well, it’s not actually getting  smaller; it’s always been small.

Let’s check the inspector  and pick the body element. 

You can see that the height is around 19 pixels.

Now, I’ll comment this out, and the  background color is the body’s color,

but the body size is still the same.

And if you check the html element,

Its height is around 35 pixels.

So, HTML and body tags do not  actually cover the whole viewport.

What happens here is when you give  a background for one of these tags,  

even if their sizes are still the same, the  background color is propagated to the viewport.

It is the default behavior of CSS.

And, this is why we often see people use  100% sizing for the html and body.

But in most cases, you won’t even need that.

Let’s remove them and give a background color for one of these tags.

The recommended way to use a background  color is, to use it inside the body tag.

What about this universal selector?

Some people think it’s the parent of the HTML tag,  

but, it’s a selector that  selects all the elements inside our document.

This is important because some HTML elements  

have default styles that cannot  be inherited from the parent.

What I mean by that?

As you can see, the body element has a default  

margin here. And I cannot remove this by giving margin 0 here.

Or if you have an h1 tag, again, it has a margin.

Let’s create a list and add some items inside.

And it has a margin and also a padding.

And I cannot remove them using the parent.

It removes only its own margin here.

So, I have to use each element one by  one, and remove the margin and padding.

And this is why we need this universal selector.

It selects all the elements in our  document, and applies a style for them.

So if I say margin and padding 0,  it’s gonna apply for every single element.

Another popular property is box sizing.

Let’s create a box here,

and I’ll give a size, background  color, padding, and a border.

And as you can see, the box  size is more than 100 pixels.

After adding the padding and the border,  the total size is 140 pixels.

To prevent this globally, we  can use box-sizing: border-box.

And now, the total size is 100 pixels.

Using margin, padding and box-sizing is  a very common usage,

But It depends on your project.

If you design a blog page with many text  elements inside, like titles, paragraphs,  

lists, removing all the margin and  padding might not be the best idea.

Also, do not use a background  color or text color here,  

because when you use nested  items, it’ll cause some problems.

Let’s create a section here  and a container inside.

And I’ll give a background color for the section.

As you can see, the background is still this  

color because we selected our div  element and changed its color.

If I move the background color to the body, I can see the section background.

Okay, right now, you know the main  purpose of these elements.

So let’s see the second CSS tip.

I’m gonna show you how to  create a snap scroll effect  

and what we should pay attention to when using it.

Let’s create 5 sections  and put some texts.

Each section is gonna contain the whole  viewport, so I’ll say height 100vh.

Let’s increase the font size and give a color.

And using nth child selector, I’ll give  different background color for each section.

Right now we are ready to give the snap effect.

To do that, we need a scroll container.

If we create a container,  and give overflow scroll or auto,  

it becomes a scroll container.

HTML tag is a scroll container by default,  

we can use it in the CSS file or we can create a new div and give it an overflow.

I'll say overflow.

Let's make this hidden first, and the height 100vh.

As you can see, it ends at this point and I cannot scroll.

But if I say change here, I’ll be able  to scroll down and see my items.

Basically this scroll bar belongs  to container, not to HTML.

Let me change the size.

As you can see, the bar is here.

Okay. Let’s remove this and  give a scroll snap type.

We’ll scroll vertically, so I’ll use  the y axis, and I’ll add the type.

It’s gonna be mandatory.

I’ll explain this in a moment.

And in the section, I need  to provide the snap position.

scroll-snap-align

It can be start, center, or end.

But in our case, it doesn’t matter  because our sections are full screen.

As you can see, it works as expected.

But if I change the size, and align to the center,  

it’s gonna show item in the  middle of the container.

Let’s take this back and change this type.

When it’s mandatory, as soon as I release my  fingers, it snaps to other section.

But if I make this proximity, I can scroll down, and it snaps  only when it’s close enough to the other section.

And it gives a more flexible scrolling experience.

Okay. After snap scrolling,  let’s talk about this font size.

I’m gonna zoom out and make this 100%.

Remember we used here 72 pixels.

But as most of you know, the recommended  size unit is rem not pixels.

If you don’t know why it’s recommended, let me  explain quickly, and after, I’ll give a small font size trick.

I’m gonna open my browser  settings and find the font size.

By default it’s medium, but some people including  

my mom using their computers and  phones with the large font size.

But if I change here to very large nothing happens  because we fixed our font size to 72 pixels.

It never changes.

To prevent this, instead of pixels, we can use rem.

And 1 rem equals 16px.

72 divided by 16 equals 4.5rem

And now, the font size changes as we expected.

But the problem is the calculation of the rem units.

If you are not familiar, it can be hard to work with.

If you are using 20 pixels for example, it should be 1.25 rem,

If you are using 30, it should be 1.875 rem

But don’t worry there is an easier way to use it.

As you know the default  global font size is 16 pixels.

And using html tag I wanna convert it to  10 pixels to make to calculation easier.

To do that I’ll say font size 62.5%.

And right now the default size  is 10 pixels and it equals 1 rem.

Using the body tag, I can set the default  font size to 1.6rem. And it equals 16px again.

And now it’s much easier to use rem unit.

Instead of this size, I can  use 2rem which is 20 pixels,

or 3 rem, which is 30 pixels.

Okay. Let me give you another CSS tip.

Let's say we have a list here, but instead of a list element, we are using h2 tags.

And inside we have some texts.

And before each text, I wanna write “Section”  and the and the number of that section.

So it’s gonna be: Section 1 - HTML Tutorial,  Section 2 - CSS Tutorial, 3, 4 and 5

But how I’m gonna do this  without using JavaScript.

I can actually create a counter  using CSS and it’s really easy.

Firstly, I’ll define my counter  inside body using counter-reset,  

and I’ll write here the name of the counter.

It can be anything.

And the default value is 0 right now.

But how I’m gonna write a text before each item.

To do that I can use before selector, and  write anything I want inside the content.

Let’s say Section.

After that I can show my-counter  using the counter function.

As you can see it’s 0 because  we didn’t increment our number.

In order to do that, I can use  counter-increment and pass my counter name here.

And right now we can see the chapters and we can  add a new item without changing all the titles.

And the last tip is order property.

I’ll create a container and  inside I’ll add 4 boxes.

The first one will be redBox,  blueBox, green and orange

Let’s give a size, and a text color

And for each box, I'll give their backgrounds.

And our container will be a flex box.

Let’s give a space between items.

And now I can give specific order  for any item using order property.

Let’s say order 2, order 1, 4 and 3

As you can see, it's that easy to give  different priorities to our flexbox items.

Okay, guys. That’s all.

If you didn’t watch the first part of this series, the link will be in the description below, and if  

you want to see the third part of the CSS tips, please  like the video and let me know in the comments.

I really enjoy creating CSS content but  it depends on the video likes and views.

Okay.

You can support Lama Dev by joining the channel  or using the link in the description below.

Don’t forget to follow Lama  Dev’s social media accounts.

I hope I’ll see you in the next video. Goodbye.