CSS problems. Part 1

For the first time css was introduced approximately in 1995, and was intended for styling simple text documents. Not web sites. Not applications. Namely text documents. Since then, css, has come a long way. Perhaps too long.

For many things, css, was not designed initially, for example, for such as: multi-columnity, responsive web design, etc. That is why it became a language full of hacks and glitches, like some kind of ancient machine with a bunch of extensions.

In the best case, working with css can be called a fun activity. And this is what makes us work. Because, as I believe, the generation of effective and cross-browser css styles is impossible and will not be possible in the near future.


')
Let's get to the point, because I'm not here to give my opinion on css. And in order to consider a number of common problems in the css, and their possible solutions.

I tried to choose a few really very common ones:

• Cleaning float `s.
• How to beat indents between elements with inline-block?
• Understanding absolute positioning.
• When to use width / height equal to 100% (part 2)
• How not to mess with z-index. (part 2)
• What is margin collapsing? (part 2)

Cleaning float `s.

It seems to me that this is the most common question in css. He is as old as the world, honestly, I am a thousand percent sure that everyone who has ever written on css came across him.

In simple words, it can be described as follows: when only elements with a float are contained within an element, it collapses as if it does not contain any child elements at all. That is, in fact, elements with float fall out of the general flow.



There are several ways to solve this problem. Previously, we used an empty div with the “clear: both” style at the very bottom of the container. Then, we replaced it with the hr tag, which is not much better.

Finally, Nicolas Gallagher proposed a new way of cleaning floats without having to touch the markup at all. After lengthy discussions and tests, we got the minimum necessary for his work, a set of styles, here is his latest version:

.clearfix:after { content: ""; display: table; clear: both; } 

In fact, I lied, she is not the last, she is the shortest. But if you need IE 6/7 support, then you need to add this:

 .clearfix { *zoom: 1; } 

To work, you need to add the .clearfix class to your project, and then apply it to the markup elements. This is the easiest and cleanest way to work with floats.

How to beat indents between elements with inline-block?

We continue with the placement of elements in a string, this time not using float, but using inline-blocks. display: inline-block was underestimated for a long time, and yet we figured out how it works and why it's cool. Today, more and more front-end developers prefer to use inline-block instead of floats when they have this opportunity.

The main advantage of the inline-block is that we don’t have to clean up floats, and we don’t face other problems that may arise due to elements positioned using floats. Simply setting the property of the display element to the value of the inline-block will result in a hybrid of the line element and the block. They can have size, indents, but their width, by default, depends on the content, and does not occupy the entire width of the parent element. Thus, they are placed horizontally, not vertically.

You may ask: "What is the problem then?" And the problem is that they are half lowercase, which means they are indented from each other in size equal to a space. With a standard font size of 16px, it is 4px. In most cases, the indent size can be calculated as 25% of the font size. One way or another, this may interfere with the normal arrangement of the elements. For example, take a 600px container with three elements inside, whose size is 200px and is set by the display: inline-block property. If you do not remove the indentation, then we will not be able to place them in one line (200 * 3 + 4 * 2 = 608).

There are several ways to remove the space we do not need, each with its own pluses and minuses. To be honest, there is no perfect solution yet. Let's take a look at everything in turn!

Markup Level: Remove Gaps

For all of our tests, we use the following markup.

 <div class="parent"> <!-- 600px --> <div class="child">I'm a child!</div> <!-- inline-block 200px --> <div class="child">I'm a child!</div> <!-- inline-block 200px --> <div class="child">I'm a child!</div> <!-- inline-block 200px --> </div> 

As I said earlier, the child elements will not be in one line, because there is an extra space character between each of them (in our case a line break and 4 spaces). The first way to solve the problem is to completely remove the spaces.

 <div class="parent"> <div class="child">I'm a child!</div><div class="child">I'm a child!</div><div class="child">I'm a child!</div> </div> 

It really works, but it doesn’t make our code readable. Although, we can reorganize our elements a bit to preserve readability:

 <div class="parent"> <div class="child"> I'm a child!</div><div class="child"> I'm a child!</div><div class="child"> I'm a child!</div> </div> 

And to be really cool, you can do this:

 <div class="parent"> <div class="child">I'm a child!</div ><div class="child">I'm a child!</div ><div class="child">I'm a child!</div> </div> 

Yes - it works! Of course, I do not recommend this approach, because it is not intuitive and makes the code ugly. Let's better try something else.

Markup level: commenting spaces

What if you comment out the spaces instead of deleting them?

 <div class="parent"> <!-- 600px --> <div class="child">I'm a child!</div><!-- --><div class="child">I'm a child!</div><!-- --><div class="child">I'm a child!</div> </div> 

Yes, so much better! The code is read and working. Yes, the method does not look familiar at first glance, but it is not so difficult to get used to it. I myself use this method when I need to remove spaces between elements with an inline-block.

Of course, someone will say that this is not an ideal solution, since it works on the side of the markup, and the problem should be solved at the css level. Really. Most of us actually use css solutions.

Css level: spacing between characters

The letter-spacing property is used to set indents between characters. The idea is to indent such that it would level the indent between our elements, then we will have to reset letter-spacing for the children so that the text in them looks normal.

 .parent { letter-spacing: -0.3em; } .child { letter-spacing: normal; } 

This technique is used in the Griddle - Nicolas Gallagher’s Sass-based grid system, so as you can see, this is quite a serious decision. Although, to be honest, I don’t like the fact that we rely on magic numbers in styles. Plus with some fonts, this number can change for example to 0.31em, etc. That is, it must be customized for each specific case.

Css level: negative margin

Another approach to solving the problem is very similar to the previous one, but using the negative indent. Its main drawback is that it does not work in IE 6/7. Plus, we need to remove the indent from the first element so that they stand exactly inside our container.

 .child { margin-left: -0.25em; } .child:first-of-type { margin-left: 0; } 

If you do not need IE 6/7 support, I think this is a pretty good solution.

Css level: font-size

And lastly, you can set the font size of the parent block to 0, to make the space equal to 0px, and then restore the font size for the children.

 .parent { font-size: 0; } .child { font-size: 16px; } 

This solution has several problems and limitations:

• You cannot restore the font for children using em as the font size.
• Spaces are not removed on devices from Android to Jellybean
• Text using @ font-face may lose smoothing in Safari 5
• Some browsers ignore font-size: 0 , for example, the Chinese version of Chrome, in this case the font-size is reset to 12px

So, this is not the best solution. As I said earlier, most likely I will use the path with commenting spaces. If it looks inconvenient for you, you can return to the floats or use flexbox in general.

Understanding absolute positioning.

Positioning elements is a tricky process and it always has been. Positioning, beginners, is given with great difficulty. They often (do) use the position property. This property determines how an element can be moved using offsets (top, right, bottom and left). And takes the following values:

• static - by default, offsets do not work
• relative - displacements move the visual layer, but not the element itself
• absolute - the displacement move element inside the context (the first is not a static element)
• fixed - offsets position an element inside viewport`a and no matter where it is located in the document

Problems appear when using position: absolute . And surely you have already encountered them: you have defined an element with absolute positioning, because you want it to be in the upper right corner of its parent (for example, close the button at the modal window).

 element { position: absolute; top: 0; right: 0; } 

... and it turns out in the upper right corner of the document. You have the thought "What the hell?". In fact, this is normal browser behavior. The key word here is context .

The code above simply says: "I want my element to be positioned in the upper right corner of the context." So what is the context? This is the first element with the position property not equal to static. This can be the parent itself, or the parent of the parent, or the parent of the parent. And so on until the first element with position! = Static.

This concept is often difficult to understand for beginners, but when you understand it, it opens up vast possibilities for working with positioned elements absolutely.

A small demo illustrating the above. Two parents, each with one child positioned absolutely with offset top: 0 and right: 0. On the left is the correct parent with position: relative, on the right is wrong with position: static.

jsFiddle

Continued “CSS Problems. Part 2 " .