Uses Of CSS Fragmentation in web designing – CSS Fragmentation is a CSS module that defines how content is displayed when it is divided (fragmented) into several pages, regions or columns.

Fragmentation occurs when a line box fits into several lines. It also occurs when a block spans more than one column within a column design container, or spans a page break when it is printed. Each piece of representation for the element is called a fragment.

Inline-Block Boxes    

Here I am telling you about the different types of block boxes in this article. Each element of your page has a box. Some of these tables are presented as blocks: paragraphs, list items, headers. These are said to be participating in a block format context. Others are online, like the words in a paragraph, vain and anchoring elements. They participate in a context of online format. In a nutshell, when I refer to a block box, I’m talking about boxes around paragraphs. When it comes to fragmentation, it is important to know what type of box you are dealing with.

1. In comparison with the display : inline, the main difference is the display : inline block in line
2. In addition, with display: inline-block, upper and lower margins / fils are respected, but with display: inline they are not.
3. While comparing display : block, the main difference is that display inline : block doesn’t add line break after the element, therefore the element can sit next to the other elements.
4. A common use for visualization: the inline block is to display the elements of the list horizontally instead of vertically.

Fragments Within Fragments

It is possible that you have an element that is fragmented and nested within another. For example, having a multicol inside something that is paged. In that case, you may want to control the cuts for the pages but not for the columns or vice versa. This is why we have values like the page that would always force a break before or after the element, but only when the fragment is a page. Or avoid-page that would prevent a break before or after the element only for paged contexts.

The same applies to columns. If you use the value column, this would always force a break before or after that element, but only for multicolored contexts. The avoid-column value would avoid a break in multicolored contexts.

There is always a value in the level 4 specification that indicates that you want to break everything: page or column. However, as a recent addition to the specification, it is currently not useful for us.

Additional values for paged media

If you are creating a book or a magazine, you have the left and right pages. You may want to control the break to force something on the left or right page of an extension. Therefore, using the following would insert one or two page breaks before h2 to ensure that it is formatted as a page on the right.

There are also obverse and verse values that are related to page progression, since books written in a vertical language or from right to left have a different page progression than books written in English. I will not cover these values more in this article, since this time I am mainly concerned with what is possible from the browser.

break-inside

Things you don’t want to break can include an exchange described above: figures where you don’t release the caption from the picture, tables, lists, and so on. Add break-inside: Avoid any container you don’t want to break into any fragmentation context. If you only want to avoid pauses between columns, use breaks-inside: avoid:column and break inside pages: avoid page

Using  Fragmentation

As you can see, the current state of fragmentation in browsers is fairly fragmented! However, there is a reasonable amount you can achieve and when you fail, the result tends to be suboptimal but not catastrophic. Which means it is worth trying.

It should be noted that the frequent use of these characteristics may lead to something other than what you hoped. If you’re working on the web instead of the column breaks and print power after each paragraph, you end up with more paragraphs than the column space, so multicol ends up in the built-in direction. You will run out of columns to put your extra paragraphs. So, even if there is support, you still need to test carefully, and remember that there are many in many cases.

Read More AT – Web Designing Course in Chandigarh