CSS Tips And Tricks 2 | I Wish Somebody Told Me Before
Summary
TLDRIn 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
🔧 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.
🌀 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.
📑 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.
Mindmap
Keywords
💡Universalselektor
💡HTML-Tag
💡Body-Tag
💡Box-Sizing
💡Scroll-Snap-Effekt
💡REM-Einheit
💡Counter-Funktion
💡Order-Eigenschaft
💡Viewport
💡Overflow
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.
Browse More Related Video
So erstellst du fotorealistische KI Bilder in Canva. Schritt für Schritt Anleitung.
20 CANVA TIPS AND TRICKS // Canva Tutorial For Beginners
NeuronWriter - erste Schritte
Einfach und schnell Kanji lernen - Die Kanji lernen und behalten + Leseprobe
Kondensator Erklärt - kondensatoren
Risikofrei von 100x Hebel profitieren? So gehts! (Bitcoin Trading Anleitung)
5.0 / 5 (0 votes)