Browsery PN6071.A45 S437 2018

Browsery HQ799.2.M352 H36 2019

Browsery QE523.T285 B4413 2019

Browsery PS3527.A15 Z46 2018

Browsery RC349.D52 P65 2018

Browsery HQ1237.C745 2019

I am going to write a “CSS for JavaScripters” book, and therefore I need to figure out how to explain CSS to JavaScripters. This series of article snippets are a sort of try-out — pre-drafts I’d like to get feedback on in order to figure out if I’m on the right track.

Today I present the first draft of the short overflow article. Feedback would be greatly appreciated.

*** START EXCERPT ***

"Web design is a constant battle against overflow."

- Rachel Andrew

Not knowing how tall something is is fundamental to web design. For instance, you cannot know in advance how long the texts will be that will be shown in your site. What happens if if the final text is much longer than the fake text you used during production? Or what if there's a wide image you hadn't counted on?

In both cases the content of your blocks will become larger than you expected, and if you've given them a fixed width or height that might lead to overflow: content escaping from the block — or at least, attempting to escape.

The easiest way to avoid overflow is not giving your blocks a fixed height in the first place. If you allow them to grow as tall and wide as they need to be you avoid quite a few problems.

This short chapter discusses how to deal with overflow.

CSS Is Awesome

The most famous example of overflow is the "CSS is Awesome" meme that's been around ever since 2009.

Born out of one web developer's frustration with CSS's overflow behavior, this meme took on a life of its own and became an example of what was wrong with CSS. Why would the 'Awesome' flow out of the box? Why should CSS be so complicated? Couldn't the box simply grow to contain the 'Awesome'?

Sure it could! And it would, except that you specifically instructed the box not to by giving it a fixed width. You could have used min-width or flexbox — both are good in dealing with unexpectedly large content — but you didn't. No doubt you had good reasons, but since it was your decision, the onus of solving any resulting issues is on you.

In these cases, the overflow declaration is your friend.

The overflow declaration

The overflow declaration allows you to define what to do with content that overflows its box. It has four values, visible, hidden, scroll, and auto. The default value is visible, and that's the one that causes the 'CSS is Awesome' effect.

overflow: visible means that you allow the content to spill out of its block. Although that keeps the content readable, it also means the content might overlap with the block below or to the right of the affected block, which can be very ugly.

When calculating the position of other blocks, the browsers' layout algorithm uses the width and height of the box you defined, and disregards the fact that content may be spilling out of the block. In fact, at that point in the algorithm the browsers have no way of knowing that the content overflows. [FACT-CHECK THIS]

Thus, when calculating the position of the next block the browsers place the block exactly where it should be given the height of the previous block and the margins of both. They do not pay the overflow any mind, wbich may cause the overflowing content to overlap the content of the next block.

Sometimes this is what you want — or rather, what you’re forced to live with. More often, though, you want to either generate scrollbars or hide the overflowing content entirely.

overflow: hidden hides the overflowing content. This creates a pleasing visual effect, but now there's no way for the user to get to the content. Therefore, hidden is something of a nuclear option: necessary in a few cases, but to be avoided whenever there's a better way of handling the situation.

overflow: scroll and overflow: auto generate scrollbars. The auto value generates scrollbars when they're necessary, while scroll scroll value always does so, even when no scrollbars are needed.

If scroll always generates those ungainly scrollbars, even when they're not needed, and auto only generates them when necessary, why would you ever use scroll? The reason is that a content change that generates or removes a scrollbar can be quite ugly.

Suppose you have a block with overflow: auto that initially does not need scrollbars. Then a script adds a lot of content to the block, causing overflow, and thus the generation of a scrollbar. Not only is this quite ugly in itself, but on some systems [BE MORE SPECIFIC] the scrollbar itself takes up about 16px of width and thus narrows the content area, which may lead to the reflowing of the text and even more overflow. And when the content is removed, all of that happens in reverse.

All this can give a quite jarring effect. For instance, see the position of the word "serves" in the two screenshots below. The creation of a scrollbar forces it to the next line, and that might be something you want to avoid.

The easiest way of preventing that effect is by giving the block overflow: scroll from the outset. Sure, the scrollbars may not be needed, but if they are there's no moving around of the content.

Block Formatting Context

[This is a practical tip that readers need to know about.]

An overflow value of anything but visible will create a new block formatting context. In old-fashioned float-based layouts it is sometimes necessary to create a block formatting context in order to contain a bunch of floats. (Just nod wisely for the moment; we'll get back to this.)

The easiest way of doing this is to add overflow: auto to the block, even though the block has no set height and the content will never actually overflow.

So if you're working in an old codebase and encounter a bunch of unexplained overflow: auto (or hidden) declarations on blocks that have height: auto, remember that they're meant to keep a float-based layout working properly. Only remove those overflows once you switched from floats to a modern layout system like grid or flex. If you do not intend to switch, leave the overflows in place as well.

Related declarations

In addition to the overflow declaration, there are also overflow-x and overflow-y declarations. They do what you'd expect them to do: they set the overflow on only the horizontal x-axis, or only the vertical y-axis. Otherwise they work exactly like overflow.

Also, iOS supports overflow-scrolling: touch, which enables momentum-based scrolling for overflowing elements. Without this declaration (or, more precisely, with the default overflow-scrolling: auto in place), overflowing elements scroll normally, i.e. they stop scrolling as soon as your finger leaves the screen. Android devices always use momentum-based scrolling, so they do not need this declaration. It doesn't hurt them, either, so it's perfectly safe to use. [TEST]

*** END EXCERPT ***

The ending is a bit abrupt, but I'm not entirely sure what to say next. Also, I'm not yet sure which chapter will come next, so I can't write a segue.

Anyway, please let me know what you think. I'm especially looking for feedback from JavaScript developers who are not all that good at CSS.

I’m writing the Box Model chapter of the new book and came to the point where I had to treat negative margins. To my surprise, I found that there is no systematic treatment of negative margins anywhere. So I had to figure it out for myself. Below is my initial draft of the negative margin section.

The latest specification only says: “Negative values for margin properties are allowed, but there may be implementation-specific limits.” and leaves it at that. Not extremely helpful. MDN is mostly silent as well, and Rachel Andrew’s big overview article doesn’t mention negative margins at all.

That’s odd, especially since negative margins are a very old functionality that I might even have used in my very first CSS test somewhere back in 1998. (Unless I used position: relative; I can’t remember.)

But anyway, here is, apparently, the first-ever systematic treatment of negative margins in simple situations.

Negative margins in CSS

It is possible to give margins a negative value. This allows you to draw the element closer to its top or left neighbour, or draw its right and bottom neighbour closer to it. Also, there is an exception we’ll get to in a minute.

Here is our test element: a simple container with three paragraphs in it. Note that the paragraphs have a width of 250px. This is extremely important, due to the exception we’ll get to in a minute.

Negative margin-top and -bottom

To start, let’s give the first paragraph a -15px margin-bottom. Essentially, when the browser calculates the point where the second paragraph should start, it moves that point 15px upward. From then on the browser lays out all paragraphs as normal.

Therefore the second paragraph, being the bottom neighbour of the first one, is draw 15px closer to the first paragraph. The margin between the second and third paragraphs remains intact; the browser calculates it normally. Thus, the rest of the vertical rhythm is preserved.

This trick is useful for subtle tweaks, where the content of one element should slightly overlap the content of the one above it.

Now let’s give the second paragraph a -15px margin-top. As you see, this yields exactly the same effect. Again, the second paragraph is moved upward by 15px, and the subsequent paragraphs follow.

Margin collapsing

Also note that margin collapsing behaves different when you use negative margins. This, at least, is specified in CSS 2.1:

In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the maximum of the absolute values of the adjoining margins is deducted from zero.

In the last example, the first paragraph still has its default margin-bottom of 1em (Chrome; can’t find Firefox’s value).

Normally, the browser would take the first paragraph’s margin-bottom and the second one’s margin-top, figure out which one is larger, and apply that margin between the two, which would yield max(-15px,1em) = 1em. That’s not how it works, though.

In case of negative margins we take the absolute values of the two adjoining margins (15px for the second paragraph; 1em for the first), and deduct the smaller (15px) from the larger (1em). This yields about 1px (depending on the font size, of course).

Thus, negative margins are actually allowed to pull elements closer to their neighbours without being hindered by regular margin collapsing.

Now we treated negative margin-top and -bottom fully. It’s an occasionally useful effect.

Negative margin-left and -right

Negative margin-left and -right work the same, provided the element has a width. Here we apply margin-left: -10px and margin-right: 10px.

As you see, the first paragraph is now offset 10px to the left, while retaining its width. Thus, its right edge also moves 10px to the left.

The second paragraph with the negative margin-right is unaffected. The negative margin-right would influence any element to the right of the second paragraph, but there aren’t any.

To show negative margin-right in its full glory, let’s float the paragraphs, so that they have a right neighbour. Here is the reference element.

Now we’re going to sprinkle some negative margins on the paragraphs.

As you see, the second paragraph is now drawn 10px closer to the first one due to the first’s negative margin-right. This is exactly the same effect as with a negative margin-bottom.

Also note that the second paragraph has a negative margin-top, which means it is offset 10px upward. The third paragraph has a negative margin-bottom, which has no effect, since it does not have a bottom neighbour.

Remember: margin collapsing does not work on margin-left and -right; just on -top and -bottom. Therefore we do not have to worry about it in this case.

If we give the second paragraph a margin-left: -10px, the same happens. Just like with top and bottom, left and right are interchangeable for this effect.

So far, negative margin-left and -right behave exactly like negative margin-top and -bottom.

width: auto and negative margin-right

Now let’s change the behaviour of negative margin-right by giving the paragraphs width: auto. They do not have a fixed width any more; instead they fill up their parent element completely while respecting its padding. That’s how width: auto works.

The paragraph with margin-left: -10px is still offset 10px to the left, but its width grows. Thus, its right edge is not offset but stays where it is.

The negative margin-right now does the same thing. It offsets the paragraph’s right margin by 10px to the right, and the paragraph’s width increases, causing its left edge to stay where it is. This only happens when an element has width: auto. As we saw before, elements with a fixed width behave quite differently.

Finally, the third paragraph has both. Both its left and its right margins are offset by 10px, essentially negating the container’s padding: 10px;.

This is by far the most common use case for negative margins. You give a container a padding so that its contents have some breathing space. However, you want the header to span the entire container, ignoring the padding. Negative margins are the way to go.

These are the header styles; the container has padding: 10px

h5 {
	margin-left: -10px;
	margin-right: -10px;
	padding-left: 10px;
	margin-top: 0;
	margin-bottom: 0;
	background-color: grey;
	color: white;
	/* no width, so defaults to width: auto */	
}

Again, this is only possible if the header has width: auto. Fortunately that’s the case in 99% of real-world use cases.

This is how negative margins behave in simple situations. Now that I established a baseline I can look into how they behave in flexboxes and grids.

Location Circulation Collection

Call No. QL444.B83 K67 2016

A few of them are expected to move into clinical trials later this year.

The coronavirus-induced lockdown has been coined as the world's biggest psychological experiment by the World Economic Forum. The spread of the pandem

 The Hyderabad-based Bharat Biotech International Limited (BBIL) would lead a project to develop human monoclonal antibodies as therapy for Covid-19 i

Gevorkian, Peter, author

Ginsberg, Michael (Energy consultant), author

Dharmadasa, I. M., author

Online Resource

Online Resource

Dewey Library - QA612.7.S36 2019

Online Resource

Online Resource

Online Resource

Online Resource

Online Resource

Online Resource

Online Resource

Online Resource

Online Resource

Online Resource

Dewey Library - QA671.A47 2020

Dewey Library - QA196.5.R3585 2019

Online Resource

Dewey Library - QA273.S6875 2019

Hayden Library - QA274.2.E23 2019

Online Resource

Dewey Library - QA483.H39 2019

Online Resource

Online Resource

Dewey Library - QA241.K6697 2020

Online Resource

Online Resource

Online Resource

Online Resource

Online Resource

Online Resource

Online Resource

Dewey Library - QA278.55.B55 2020

Online Resource

Dewey Library - QA614.8.A97 2019

Dewey Library - QA9.S5813 2019