Solving problems with CSS. Why CSS is so important where I can write CSS

Such an approach was bulky for several reasons:

• tables in HTML. various: They require a lot of template code;
• marking was semantically incorrect: Tables should be used for multidimensional data;
• changing the layout required a change in markup: if we wanted to move the left column to the right, they should have been modify HTML structure;
• tables were prone to syntax errors: lines and cells for correctness must go and invest in a certain way;
• marking was unreadable: Tables were invested in other tables to get additional columns inside the columns.

That is why from the application of tables as a tool slowly refused and instead of them used CSS.

What is CSS

CSS (Cascading Style Sheets) means cascading style sheets and is a style markup language (as HTML or XML). Thus, CSS does not represent anything in itself, if not related to an HTML document.

CSS brought a life In an HTML document, choosing fonts, applying colors, defining indents, positioning elements, animating interactions and much more.

How CSS works

CSS. chooses HTML element (for example, paragraph), asks property To change (such as color) and applies a certain value (for example, red):

P (Color: Red;)

The word "style" can be deceptive. You might think CSS is used only to change the color of the text, size and type of font. But CSS can set the layout of an HTML document, determining the height, width, internal and external fields, position, column, etc.

Where can I write CSS?

CSS as an attribute

You can write CSS directly in HTML elements using the STYLE attribute:

This is an important text.

CSS B.

You can use the tag

This paragraph will be red.

CSS in a separate file

You can write your CSS in a separate file with extension. CSS, and then tie it from HTML using a tag .

P (Color: Red;)

This paragraph will be red.

This HTML document, which "calls" the CSS file, in our case, the file named style.css is located in the same folder as the CSS file.

This third methodusing a separate CSS file is preferred.

Cascade Style Tables (CSS) are used to make a webpage attractive in the eyes of visitors. In addition, CSS styles table greatly simplify the web page development process. Also CSS allow you to make changes in one place, and not edit the entire site. Thus, you do not need to visit each web page of the site and edit them.

CSS saves your precious time and energy. Cascade style sheets, as follows from the name, determine a specific style for web pages based on a list of priorities, commonly called "Cascade". In addition, it also allows you to manage various elements on the web pages of your site. One CSS styles table can control the font, formatting, text size, positioning, style and color of the entire website. Although cascading style sheets can change the presentation and appearance of your website, however, they have nothing to do with the website design.

CSS can help web master in many ways. Thanks to the CSS website will have a more attractive design. At the same time, even search engines prefer CSS-based websites when it comes to assigning them ranks in the search index.

Separation of the site presentation from its contents.

With CSS, you can get a great control over the appearance of your site, as this technology allows you to link different styles with the text of your site. As a result, if you need to change the appearance of any element of the web page, then you will need to edit just one external table of the CSS styles table, and this will affect the entire website. This approach not only provides a flexible management process, but also saves time.

Increase the site loading speed.

Since cascading style sheets are text files, they weigh little and use less bandwidth, which in turn increases the speed of downloading your site. According to statistics, the site using external CSS-based style sheets is loaded at about seven times faster than a similar site without this technology. Since text documents are loaded very quickly, web pages will be displayed almost within a few seconds, and this will have a positive effect on the general impression of visitors when visiting your site.

CSS makes it easy to change the position of any items on the web page. For example, the menu can be placed in any place: left, right, top or bottom. At the same time, the main goal of such positioning of elements is that search engine robots first of all scan the main content of your website. To achieve this, all the auxiliary elements are needed, like the menu, in the HTML code to place after the main content.

Compatibility CSS with modern browsers.

Since there are currently many different browsers, the web master is difficult to check the performance of the site absolutely in all browsers. However, if you stick to the standard CSS-based layout, then this problem becomes easily solved.

As can be seen from the foregoing, CSS technology is beyond what provides tools for creating modern, attractive sites, it also helps to solve a number of problems. That in itself determines the high significance of CSS.

One of the oldest services on the Internet is forums. These communication sites appeared among the first and since then remain in almost unchanged form. But despite their solid age, they as before they cope with their functions. Here people communicate, ask questions and receive answers.

Hello, dear blog readers Website. Today I would like to talk about whether you may need when you work with the knowledge of HTML language (read about what it is), the basics of working with CSS cascading tables (Introductory article on the topic you will find), as well as understanding At least the foundations and principles, building programs in PHP and logic work with MySQL databases.

allows you to do sites, do not own All those mentioned above the wisdoms, but at the same time, you will probably have questions and problems that you cannot solve the means even the most trusted CMS (Joomla, Wordpress, Drupal, etc.).

Why may you need when working on the site knowledge of languages \u200b\u200b(markup, styles, server programming)

Either you will not find such a item in the admint of CMS among many other settings (the logic of the authors of the engines when setting some settings remains incomprehensible and, possibly, the power of the author's habit of the author) is played here, or the developers will not include such an item in the administration of the content management system at all . It is impossible to implement the settings for all through the admin - there, usually, only the most necessary and frequently used settings are displayed.

Often happens it is easier to solve the problem Not regular provided in the administrator by means, but directly, the right of something in the database or adjusting the contents of certain engine files through access to the FTP.

Yes, for this it will be necessary to spend time on the study of at least the foundation of the HTML markup language, to understand how cascade style tables affect the appearance of webons, as well as deal with the database device, learn how to change it. And, perhaps, the most difficult thing is to understand the basic principles for writing the code in the PHP language in order to understand what and where it is possible to change painlessly, and what can not be touched.

I will begin, of course, with the design of the webons (actually, at the moment I have finished this case and you can familiarize yourself with the results and). As I mentioned in one of the previous posts, until recently, all resources consisted of HTML pages. Moreover, the website content (texts, images, tables) and its design (colors, background, indents) were asked.

In a modern understanding of the correctness of the vertex, the filling should be carried out using the tags of the hypertext markup language, and the design of this filling should be due to external file tables. Such a separation allows you to unload the website page from excess service code.

The fact is that search engines are very intent watching the ratio of the information component Code of the web page (text displayed in the browser) and its service component (tags, a variety of scripts, etc.). Therefore, by making out of this page, everything that does not bear the information component, but is only responsible for decorating pages, we improve the ratio of search engines to our project (well, at least in theory).

Plus, the list of CSS rules made to a separate file allows you to unify resource design. If necessary, it will always be possible to change something in the design is not the right code of all webons, because In this case, it will be enough to fix the existing or add new style properties in the style of all pages to the style of styles.

With the appearance of styles tables Many tags of the language of hypertext markup and their attributes began to be considered outdated and not recommended for use. Instead, they are advised to use the CSS properties that perform the same actions. This does not mean that HTML is now not necessary to study, simply decreased the number of tags and their attributes that need to know and be able to use to create and maintain in the proper state of the site. I will try to tell about those tags that I myself constantly use.

In which editor is better to edit or make changes to the code

There is nothing difficult in this, because in fact it is not even a programming language, but hypertext marking, something similar to syntax in Russian. What would I like to immediately advise, relying on your own experience? Try to write tags yourself in notepad, type NotePad ++. (Read mine), and not in programs, such as Drimvuiver. Why?

Yes, because in this case you miss your hand and remember the writing tags and attributes. Yes, in Dreamvyver-type programs it is more convenient to be top. You can immediately see it in the browser, and the writing options for this or that tag can be selected from the drop-down list.

But the fact is that you basically have to rule the existing code in the files of your engine and will be much more convenient if you will remember the writing of all tags and their attributes by heart (the benefit of them is not so much). Why, to correct one tag, open the file in the cumbersome Dreamvier, when there is enough ordinary notebook for these purposes, well, or its advanced counterpart for the name of the non-type plus plus (link is slightly higher).

Although, this is my personal opinion (IMHO) and you decide what is more convenient. For example, Evgeny Popov, on course, I studied all this case, apparently, the adherent of Drimvyever. It is important in principle one - so that you ruled the code in the editor that is able to maintain all the changes made and which may, if desired, return everything as it was (back).

In this case, no matter how you contradict, everything will be fixable. And, of course, the illumination of the syntax of the language on which you write or edit the code is very convenient. NotePad ++ - this is definitely my choice! I told about his possibilities in the article later.

Probably telling about the markup and its design in turn will not be quite right, so I will try to talk about their sharing. It should be understood that CSS properties are recorded in one or more individual files that you can easily find in the topic of registration used for your engine.

While web tags in modern CMS are not recorded in some one or more files, as it was before, and is generated (interpreted) from PHP. And it was the Code that has already generated in this way that the browser is applied to the browser so that it in turn interprets it into an open online page for us. Heathwood, isn't it?

therefore edit tags in any CMS It is not such a trivial task, even if you are completely relieved with the language of hypertext markup. After all, tags you have to rule in php files and, therefore, you will need to know at least its basic concepts and syntax.

But do not worry, in order to edit the design of great knowledge in PHP from you will not need. Tags there lie, how to say, on the surface and it is not much difficult to identify and correct if necessary.

What tools you can use

The problem arises, as a rule, in the other. How to find that file with PHP extension in which the necessary fragments of tags are formed? Here is a question of issues. Yes, of course, if you have experience in working with data engines, then you, I think, coeal. But if you are new and do not know which of hundreds of PCP files for what is responsible?

There will help you with a magnificent plugin for an equally magnificent browser, as well as the NotePad ++ mentioned above, and not unwitting to many. This bunch of programs will help you to turn the mountains and will save the mass of time.

In the nearest posts, I am going to tell in detail how to use these programs to effectively address emerging problems with the site. Yes, I almost forgot about an indispensable program that allows you to access FTP - FileZilla (there is already an article on this topic). Well, about we, of course, let's talk.

Well, the goals are outlined, the tasks are delivered, it remains only to perform them. For the sim, allow you to declare.

Good luck to you! To ambiguous meetings on the blog pages Website

You may be interested

Beautiful Russian fonts for the site and computer in the online Google Font service - where to download and how to install Adaptive (responsive) design - site optimization to view it on mobile devices
GIF, PNG or JPG - formats of raster graphics for the web, their pros and cons when used on the site

Sometimes CSS behavior can confuse. Learn about some cunning properties that can cause the most common problems, and how these problems can be solved.

CSS is a mess. CSS was first implemented in 1995, and was originally intended not to stylish websites and web applications, but for typography of simple text documents. Since then, CSS has passed a difficult path. Perhaps too complicated.

First of all, CSS was not intended for layout of multicolon documents, adaptive interfaces, and many other. That is why he has become a tongue with a lot of hacks and glitches, a kind of wonderful steam machine with a lot of extensions and a row.

On the other hand, it makes CSS rather funny. And to some extent - we are owned by the fact that we have work. I am completely convinced that the development of absolutely cross-browser CSS is not yet possible, and it is unlikely possible in the foreseeable future.

In any case, I am not writing to express my beliefs and discontent, but in order to talk about CSS. Today we will raise questions about some common problems and try our solution to solve them.

Flow Cleaning (Float Clearing) - The question old as the world

I think this is the most common question that causes bewilderment when trying to stylize items. He is old as the world, so I'm 100% sure that anyone who ever wrote styles on CSS got into a similar trap.

Basically, when the element contains floating blocks inside (float), it "collapses" - takes the minimum height. This occurs because the floating elements are knocked out of the total flow of elements, so that the block in which these elements are wrapped, behaves as if it does not contain any subsidiaries.

There are many paths that allow you to correct this behavior. In the past it had to add empty div with a property clear: Both. After all floating elements, at the end of the container. You could also have this div Replace tag hr. - Also not the best option.

But Nicolas Gallagher proposed a new way to clean the flow in the parent element without contamination of markup with additional tags. After turbulent discussions and tests, a working version was identified with a minimum set of properties, the latest version of which is given here:

ClearFix: After (Content: ""; Display: Table; Clear: Both;)

In fact, I lied saying that this version is the latest, but it is definitely the most optimized option. If you need support for IE 6/7, then you need this optional code:

What you really need is to determine the class .clearfix. In your project, which you later can prescribe elements in which you want to clean the stream. This is the easiest way to work with floating elements.

How to deal with the space between the inline-block elements?

Let's try to set items to one line, but without using the property. float., while defining them as a straight block (inline-block) items. Property display: INLINE-BLOCK For a long time, it remained undervalued and a little-used, but we finally figured out how it works, and rated the strengths. Nowadays, more and more interface developers get rid of floating elements in favor of straining elements, provided that it is possible.

I believe that the main advantage of the strainer elements is that we do not need to take care of the flux cleaning and other inconveniences that can provoke floating elements. Basically, by defining an element, as a straight-block, we turn it into a kind of hybrid: a semi-line and a semi-block. Such elements can be changed in size, they may have external indents, but their original width depends on the content, while the block elements are by default take the entire width of the parent. That is, they are built on each other horizontally, like symbols in a string, and not vertically like blocks.

Here you will say: "And what could there be a problem with them?". The problem is that they are half a row, and, like lines, they are separated from each other with a slight interval equal to the width of the empty symbol. For standard font 16px, the dimension of this distance is 4px. In most cases, this distance is 25% of the font size. In any case, it annoys when you try to build elements. Let's assume that we have a parent element in 600px wide with three daughter-block elements of 200px width. If you do not get rid of these four-pixel spaces, we obtain that the resulting width of the elements will be larger than the width of the parent element (200 * 3 + 4 * 2 \u003d 608).

Fortunately, there are several ways to get rid of these unwanted intervals, each with their advantages and disadvantages. To be absolutely honest, I will say that there are no ideal solutions yet. Let's take a look at these ways, one by one!

Using the markup: we remove the gaps

Pay attention to this markup - I described it in a few lines before.

As I said earlier, the three of these blocks will not fit into one line, since there is one or more space signs between the blocks (in our case - a string translation symbol and two spaces). The first way implies a simple removal of spaces between the elements:

This method works, but very worsens the readability of the code. Perhaps we can convert our tags instead of building them in one line, the code will become more readable:

Another unusual option:

Yes, this approach works! But in general, I would not recommend it to use, as it is not intuitive. Despite the fact that we managed to get rid of the unwanted space between the elements, in return we received a rather unpleasant code. Let's try something else.

Marking: Commit the intervals

And what if commenting the gaps instead of getting rid of them?

Wow! This is much better! The code remained readable, and in general everything looks fine. Even if it looks strange at first glance, perhaps this approach will be useful to you. Personally, I use this approach when I need to remove the space between the strait block elements.

However, some will say that this is not the perfect way, since this solution requires control from the markup, and positioning problems is CSS business and only CSS. And they will be absolutely right. This leads us to CSS database solutions.

CSS: manipulation space between characters. LETTER-SPACING Property

Property letter-Spacing Used to set the width of the space between characters. The idea of \u200b\u200bour way is to make the space between the characters less than the width of the space, and for the child elements lead it to the original form:

Parent (Letter-Spaction: -0.3Em;) .Child (Letter-Spacing: Normal;)

This technique is used in the griddle - a grid engine developed by Nicolas Gallagher, so we can consider this option quite reliable. However, I do not really like what we rely on some kind of magic number. In addition, for some fonts you will have to set a value below -0.3EM - for example, -0.31EM or -0.32EM. You have to adapt to each specific case.

CSS: Negative External Indent

Another way that is similar to the previous one is the use of a negative retirement. This method gives failures in IE 6/7, as they are not friendly with negative retreats. In addition, you need to remove a negative indent at the first child element so that it does not move to the left, and that the child elements are completely climbed into the container:

Child (margin-left: -0.25em;) .child: first-of-type (margin-left: 0;)

If you do not need to support IE 6/7, or if you have a separate style file for these browsers - I think it is pretty good and safe solution.

CSS: font size

And the last, but far from the worst way is that you can try to set the font size of the parent element in 0 so that empty characters also become zero width, and then restore the font size for child elements.

Parent (Font-Size: 0;) .Child (Font-Size: 16px;)

This method works fine, but he also has its drawbacks:

• you cannot restore the font size using a relative value. em.Since the font size of the parent element is 0PX
• spaces are not removed in standard Android browsers to Jelly Bean
• if you change in context @ font-face, the font may not be smoothed in Safari 5
• some browsers are not allowed a zero height font, for example, Chinese Chrome exhibits such a font to the standard 12px

So this is definitely not the best solution. As already spoke earlier, I would stop using the method with comments.

We disassemble absolute positioning

Positioning is a pretty tricky thing. Many newcomers are stuck on the moment when it is necessary to samp out the element on the page. And they usually use poorly, or vice versa - abuse - property position. This property determines how the element will be shifted relative to some side ( top., right, bottom and left.). It takes four values:

• static. - The default value, displacements do not work
• relative. - the visual layer is shifted, but not the element itself
• absolute. - the element is shifted in the surrounding context (first non-static ancestor)
• fixed - elements are positioned in the viewing area, it does not matter what its position in the DOM

Usually the problem occurs when used position: Absolute.. You may have already encountered similar: Specify the element with an absolute position, since you want it to be disfigured relative to the upper right angle of the parent element (for example, as a small closing button of the model window, or something similar)

Element (Position: absolute; top: 0; left: 0;)

... and it is displayed in the upper right corner of the window. And you think: "What a fig?". In fact, it is a predetermined browser behavior. Keyword here - context.

The above code actually means: " i want my element to be placed in the upper right corner relative to its context". So what is " context”? This is the first non-static ancestor.. It can be a direct parent element. Or parent parent element. Or parent parent of parent ... and so will be a search to the first element, whose positioning is not specified as static..

It may be somewhat difficult for understanding, especially for beginners, but if you once learned this - you can very flexibly control absolute positioning.

Here is a simple example showing what we just talked about. Two parent elements, each inside a child element, which is proposed by absolutely values top: 0. and right: 0. On the left, the parent element is positioned relatively (expected behavior). Right parent element is left static (incorrect).

When to use a height / width of 100%?

100% height

Let's first figure it out with a less complex example. When to use height: 100%? In fact, many of us at least once wondered by the question of "what the hell? I expected that my page would be at least to occupy the entire height of the screen! " I'm right?

In order to answer this question, you need to understand what actually means a property. height: 100%: Full height of the parent element. It does not mean "all height of the screen." So if you want your container to occupy the entire height of the screen, height: 100% Not enough.

Why? Because the parent element of your container ( body.) has the default height aUTO.What does it mean that its size is determined by the contents. So you can try to put height: 100% And for the element body. - It will still not give the desired effect.

Why? Because parent element tag body. (hTML.) has the default height aUTO.What does it mean that its size depend on the content. And what if you try to ask an element hTML Height: 100%? Works!

Why? In fact, because the root element ( hTML.) - This is not the latest parent block on the page - there is also a viewport window. Simply put - this is a browser window. So if you ask height: 100% Element hTML.You will make it a height equal to the browser altitude. That's just just.

The result of our history is reflected in the following code:

HTML, BODY, .CONTAINER (Height: 100%;)

And what if the parent element is set min-height, but not asked height?

Roger Johansson recently revealed a problem with height: 100% In the case when the parent element does not have an appointed height, but the minimum height is set for it. I will not delve into the description, but as a result, the decision is that the parent element needs to set a height of 1px, so that the child element can stretch it to min-height.

Parent (min-height: 300px; Height: 1px; / * We are needed so that the child element revealed for the entire height of min-height * /) .child (Height: 100%;)

100% width

Now let's deal with the parameter width: 100%. Immediately remind you that, like with a height, setting width: 100% - This is an indication that the element should be the same width as the parent element. There are no surprises here.

And now I will share a little secret. The width is not exactly the correct name for this property. Property width. In fact, does not define the entire width of the element, but only the width of its contents, which is completely different from the full width of the element.

If we add an inner field and borders to your element to which the width is exhibited width: 100%This element will not fit into the parent - it will go beyond its limits. All this is due to fields and borders. And that is why the property width. It would be called Content-Width (content width). Please consider the following example to understand what I mean:

The width of the parent element is equal to 25EM.. The width of the child element is 100% equal to 100% (from its parent element), but also has a 1em field (1em left, 1em right. In sum horizontally it will be 2EM), as well as the border at 0.5EM (only 1em horizontally), which leads To the fact that the resulting width of the child element will compliment 25EM (100%) + 2em + 1em \u003d 28em. Hmm ... Houston seems to have a problem.

There are four ways to correct the state of affairs. First, and definitely the best - avoid installation width: 100%, especially if there is no use in this, as in this case. A child element is a block element that automatically expands it to the width of the parent element (without that problem that we see above). Unfortunately, if we are dealing with strain-block elements, you can use the following fix.

Can not use width: 100%, and set a specific width to the element yourself. In our case, it is 20 - (2 + 1) \u003d 22em. It must be said that this solution is bad, since it is necessary to manually calculate the desired width of the element. Paying another way!

The third option will be using cALC ()To automate the calculations: width: Calc (100% - 3EM). All the same bad. First, we need to calculate the sum of horizontal fields + vertical boundaries. Secondly, cALC () It is not supported in the most best in browsers (it does not support IE 8, Safari 5, Opera 12 and Standard Android Browser).

Fourth option - use the property bOX-SIZING: BORDER-BOX. Essentially, it changes the behavior of the container model so that the Width property reflects the total width of the element, the boundaries and fields are included. The good news is that support for browsers of this property is pretty good (everything except IE 7 and Opera 9).

How not to make a mistake with z-index?

All items on the page are positioned in three-dimensional space: in addition to vertical and horizontal positioning, the elements are also located along the z axis. At first glance, this concept seems to be quite simple: elements with higher Z-index are displayed on top of the elements with lower Z-index .

Unfortunately, things can be more complicated than they seem at first glance. I am generally confident that this is the most confusing CSS property. I am confident that problems with Z-index are the most common and annoying, with whom you can only meet while working with CSS. But we will try to find a solution.

Let's start from the beginning: the z-index property does not work with static elements. In order to move the element along the Z axis, you need to determine the positioning for the item as relative., absolute. or fixed. So the first thing we have to do is make sure that the item is properly positioned before you think about appointing it Z-index.

Now, you should remember that the elements in the DOM are not located on the same layer. This means that the Z-Index exhibits in a very important value may not be enough to display it over other elements. It is called context of overlay.

By changing the position along the z axis, the elements can be made overlapping each other in the desired order. Here's how, according to CSS, the specification displays elements within one group context:

1. background and borders of the element that forms a group context
2. daughter group contexts with negative levels (the first are the smallest)
3. in-streaming, non-line, non-approaches
4. non-sociable floating elements
5. in-streaming, line, unprovision descendants, including tables and most lowercase blocks
6. daughter group contexts with level 0 and socotical descendants with level 0
7. daughter group contexts with positive levels (from less to more)

When the result is terrible

Well, it was the most basic information about the property Z-index. Knowledge of this can save you a lot of time, and reduce the number of problems, be sure. Unfortunately, this is not enough. These were still flowers!

The fact is that each group context has its own scale along the Z axis. Basically, the element A in the group context 1 and the element B in the group context 2 cannot interact with Z-indexes. This means that an element A is part of a group context that is at the very bottom of the group of grouping, and there is no possibility to deduce it in front of the B element, which is in another group context, which has a higher group order, even if you set it very high Z -Index.

But wait - in fact, it's still worse. Element hTML. Forms root group context. In this case, each socotized (non-static) block with the value of Z-index is greater than aUTO. Creates a new group context. There is nothing new in this. And here everything becomes pretty sad: some CSS properties that are completely unrelated to positioning create new group contexts. For instance, opacity.

Yes, yes - property opacity Creates a new group context. Properties also apply transform and perspevtive.. But it does not make sense, isn't it? It means that if you have an element with transparency, different from 1, or with a transformation other than none - You have a potential problem.

Unfortunately, each problem with Z-index is unique, so it is not possible to offer any universal solution for all problems with Z-index. At the end, you can withdraw several conclusions:

• always check that your items are set to positioning before applying to them z-index
• do not use Z-index with large values, it is absolutely meaningless. In most cases, it is enough z-index: 10
• make sure that the items you want to change the display order belong to one group context
• if you still have not solved the problem, make sure that you have no transformed or translucent elements on the way

What is the union of indents?

I think this is one of the "glitches" CSS, which took most of my time. I believe that you will say that it is as strange as the behavior of Z-index. In short, the union of indents is when the upper and lower indent of the two elements merge into the greatest of the two of these indents. Generally speaking, the vertical indentation between the two blocks is calculated as follows:

Apparently, this is exactly the reason why everything works exactly as (as defined and described in the CSS specification). Be that as it may, sometimes we do not want vertical indents to unite. In order to understand how to fix it, first consider the reason for such a problem. The union of indents happens in three different cases:

Related blocks

When two adjacent blocks have vertical indents, they are combined into the greatest indent from the lower deposit of one element and the top retreat of the second. This can be prevented by several paths:

• clear: Left; Float: Left; For adjacent blocks (Right also works)
• display: INLINE-BLOCK ON SIBLINGS (also triggers inline-table)

Parental Element and First / Last Daughter Element

Usually, the parent top indent and the upper indent of the first child element is combined into the greatest indent. Similarly, the parental lower indent and the lower indent of the last child element is combined into the greatest. This phenomenon is also known as the "ancestor union". There are several solutions to combat such behavior. Most of them consist in adding one of the following properties to the parent element:

• overflow: Hidden. (or other other than AUTO)
• padding: 1px (or any other value, more than 0); Some browsers even support subpixel values)
• border: 1px Solid Transparent (or any border)
• display: INLINE-BLOCK (Lowning tables also work - inline-table)
• float: Left. (Right also fits)

The following example demonstrates these fixes in action:

Empty blocks

When the empty block does not have any borders or fields, nor height - its upper and lower boundary are combined into one. In this case, this is suitable for the first or second case, which are described above - the combination of borders with the parent / adjacent element. However, empty elements are also, in general, a bad idea, so I hope that you will not have to deal with them often.

RESULTS

Wow, quite a lot of things, isn't it? But, unfortunately, it is only the top of the iceberg bugs, hacks and glitches. I described only the most frequently meeting problems with which you may encounter while working with CSS, but there are still a lot of similar things as incompatibilities of browsers, mess in manufacturers, specificity of selectors, cascades and inheritance, and much more.

In any case, I hope that some solutions will allow you to save time.

We present the translation of the article "Why CSS Grid Is Better Than Bootstrap for Creating Layouts" from Per Harald Borgen, published on the website RU.HExlet.io.

CSS Grid is a new way to create layouts on the Internet. For the first time, a full-fledged system of layers is available directly in the browser, which gives a lot of advantages.

These advantages are becoming particularly expressive if you compare CSS Grid with the most popular Bootstrap framework. You can not only create layouts that were previously impossible without JavaScript, but your code will become easier to maintain and understand.

Let's look at the three main reasons why I think CSS Grid is superior to Bootstrap.

Marking will be easier

Replacing bootstrap on CSS Grid will make HTML cleaner. Although this is not the most important advantage, it is probably the first you will notice.

For clarity, I created a fictitious web site layout so that you can compare the code required for two versions. Here:

Bootstrap

Let's first consider the markup needed to create this site in Bootstrap.

Here I want you to pay attention to what:

1. Each line should be with a separate tag
   .
2. To designate a layout, class names (col-xs-2) should be used.
3. When this template is complicated, HTML too.

If this is an adaptive site, tags look as a rule even worse:

CSS Grid.

Now let's look at the way to implement the same in CSS Grid. Here is HTML:

I could use semantic elements, but decided to adhere to DIV so that the comparison with bootstrap looks clearer.

You can see immediately that this markup is easier. Ugly class names and additional DIV tags for each line - in the past. This is just a computer for the grid and position inside it.

And unlike bootstrap, this markup will not be too complicated with the increasing complexity of the page layout.

In the example with bootstrap, you did not need to add CSS, in CSS Grid, of course there is a need. If specifically you need to add it:

For some, it may be an argument in favor of bootstrap: You do not need to worry about CSS to create a simple grid - you just build a layout in HTML.

But, as you will understand from the next item, the connection between the markup and the layout is actually a vulnerability, if we are talking about flexibility.

Much more flexibility

Suppose you want to change the layout depending on the size of the screen. For example, raise the menu to the top row for viewing from mobile devices.

In other words - change the layout with this:

on this:

CSS Grid.

Do it with CSS Grid is very simple. We add a media request and mix different blocks as we want:

The ability to create a layout in this way - without worrying about how the HTML is written is called independence from order in the code (Source Order Independence), and this is a giant victory for developers and designers.

CSS Grid allows you to turn HTML to what it should have been. In the layout of content, not visuality, which is intended for CSS.

Bootstrap

If we wanted to do the same in Bootstrap, we would need to change HTML. We would need to raise the Menu tag to the top row, in addition to Header, because Menu is in the second row hostage.

Make this with the presence of a media request is not a trivial task. This can be checked only with HTML and CSS, and you would have to mess with JavaScript.

This example shows the huge advantage of CSS Grid, which I experienced.

No more restrictions 12 speakers

This is not the biggest problem, but she took out a lot of themselves. Since Bootstrap Grid is divided into 12 columns, you will have problems if you want a layout of five. Or seven. Or nine. Or from a number that is not twelve.

With CSS Grid, everything is wrong. You can make your own layout from so many columns from how many want. Here is a layout of seven columns.

This is done by setting the REPEAT (7, 1FR) value for Grid-Template-Columns, like this:

Perhaps there is a hack way to make a similar in bootstrap ... and I know that Bootstrap 4 uses FlexBox, which makes it possible for such flexibility, but it still will not come out of beta.

Before completing this article, naturally, you need to talk about the support of browsers. At the time of writing this article, 75% of global web traffic supports CSS Grid.

But before you completely refuse the thought of using CSS Grid, I advise you to listen to what Morten Rand-Hendrixen says about it. He claims that CSS Grid is the ability to rethink how we present backward compatibility:

"CSS Grid is a markup module, it allows us to change the marking of the document without interfering with the order of the source code. In other words, CSS Grid is an absolutely visual tool, and if it is properly used, it will not affect the internal connections of the content in the document. From this, it should be simple, but an amazing fact: the lack of CSS GRID support in the old browser should not influence the perception of the site visitor, it should simply change this perception. "

In other words, as soon as you separate the contents from visuality, all visitors will see the contents, but CSS Grid will watch the best for those who have its support with better markings.

Conclusion

"The more I use CSS Grid, the more convinced that there is no advantage in adding an abstraction layer over it. CSS Grid is a marking framework, stitched directly to the browser. "