Cross-browser layout in modern conditions - a general understanding of the necessary principle. Always think cross-platform

Good day, dear guests of my educational blog and loyal subscribers. In this current publication I want to tell you what cross-browser layout means.

That's why I'll give a definition this term and I will describe in detail what it is, explain why the problem occurs different display the same site using html and css and I will give some useful tips. Let's start the debriefing!

Cross-browser compatible, show your face!

All of you know the English name for the term “cross-browser”: cross-browser. Literally translated, this means: “works in all browsers.” This is essentially the main goal of cross-browser compatibility: to promote identical display in any existing browser.

This means that no matter in which viewing software you open the service, its style markup should not change.

Why is everyone so problematic?

In the IT field, this philosophical question can be answered. And it is, in fact, very simple. Nowadays, technology is developing at a breakneck speed, and therefore every year extensions and updates are released for browsers, support for new features of web languages ​​is introduced and, accordingly, outdated functions and methods are eliminated.

All this contributes to the fact that different browsers work differently with some software solutions, may display them incorrectly or may not support working with them at all.

It follows from this that new versions of browsers support many recently released optimizations of languages ​​and libraries, while earlier versions do not understand what the developer actually wants from them.

The second problem with incorrect display of objects on web service pages can be browser standard values. So, in every product, be it Safari, or others, most properties and attributes have certain default values. As an example, we can name different indents from the edge of the screen for the body tag.

And the third problem can be attributed to some extent to the negligence of the developers themselves. What do I mean by this? Just non-compliance with the standardized rules that were established by the special organization W3C (the official website is located at https://www.w3.org).

This consortium is developing common standards in the field of web development, thanks to which compatibility between various software products is achieved.

Recipes for Solving Display Identity Issues

Having become familiar with the main “stumbling blocks” on the path to cross-browser compatibility, you probably asked yourself the question: “Then how can you make a website that functions the same in all browsers?” To answer this question, I decided to list basic solutions And useful tips in order.

In fact, there is a lot more that can be written on this topic. But I think it’s worth stopping at this point in healthy recipes, because important points I told you.

Please note that it is impossible to learn cross-browser layout in one go. It is worth practicing and trying new solutions when implementing new projects. Therefore, deepen your knowledge through books, watch courses related to this type of layout and the basics of usability, read useful articles.

Best regards, Roman Chueshov

Read: 106 times

Hello, dear readers of the blog site. Our task today is to create the so-called site layout not with the help of (yesterday's layout), but with the help Div elements. Those. we will need to build on divs top part(header), bottom (footer) and three columns for example.

By the way, we already solved this problem when I wrote about.

It would seem that it is not worth repeating, but I am not going to do that. Today we will describe a fundamentally different website layout method, and also consider in parallel the purpose of directives @import and @media(from ahead) in what we have already studied (on basic level, of course) CSS style markup language.

Website layout on blocks - do you need it?

Moreover, we are at this moment have already managed to disassemble and HTML language according to the bones, while relying on the original source in the person of the consortium. However, I think that not everyone was inspired by my exhortations and immediately rushed to study, as well.

And I even partially understand you. After all, knowledge of these things in itself will not bring you either fame or wealth, but will only take up a lot of time that could be spent on a much more pleasant activity. Just as knowing how to use cutlery does not guarantee that you will have tasty food on your desk. However, in right moment this can be useful and play an important role.

About ten or twelve years ago, I decided to study HTML at any cost, but I got stuck at the very beginning, in my opinion, and quite quickly lost interest in this idea, preferring an exciting game of another shooter to mocking my dull brain.

Yes, yes, games were once my hobby, but now the website has become this hobby, and I have the opportunity to put into practice some of the things I once described. Moreover, by analogy with games, the number of banknotes I earned is still perceived as some kind virtual glasses, showing how successfully I am moving forward.

Apparently this is already ineradicable, although over the past few years my wife has quite radically changed her attitude towards my next hobby (it’s a pity that she will be the one checking this article for grammatical errors, otherwise I would have described all the changes that have taken place in more detail), because this blog contrary to all her initial expectations and doubts, it gives a real output in the form of rustling banknotes (read about how to legally materialize numbers on the screen into numbers on the current account of an individual entrepreneur.

In general, this lyrical digression was not made by chance, because I want to say that Html and CSS are small building blocks in building your Internet business, but possession and understanding of the principles of website layout will give a certain number of points ahead of those who neglected this knowledge.

The overall success of a web project often depends on such little things, which can easily (and often very pleasantly) be pushed into the far corner. I just can’t remember one thing - what allowed me to step over that invisible barrier woven from laziness and lethargy of thinking. It’s possible that the cards just fell that way. Therefore, I wish you to overcome this barrier too, but I cannot tell you exactly how to do this.

Okay, let's continue with those who haven't switched. How to build a website layout using Div elements and style rules? Let's get a look. Naturally, we will imitate the operation of this layout local computer, simply dumping all the files we need into one of its folders. No hosting or . To understand the principles this will be unnecessary.

So, let's start layout. First, we create and name a folder for storing files of our future web project, and then create a text file inside it with the extension .html and the name index. We also create another one inside this folder, which we call CSS (our external style files will live in it).

It will be possible to add another folder where we will put pictures used in the layout of the site, which will be part of it ( background images). I first advise you to optimize or, in other words, to the maximum.

Well, now copy the “fish” below into your index.html. It’s quite convenient to use to work with code, although, if you have the skills, Dreamviewer may be a more functional solution:

First, as always, must go, the purpose of which in more detail described in the linked article. Inside meta tag we indicate for its correct interpretation by the browser when opening our project in it. Each document must have a completed (page title), so we added that to the “fish”.

It is clear that the site is such by definition due to the belonging of all its constituent documents to one domain name, however, the main argument for visitors will be the similar design of its web pages, and this is what we will need to take into account during the layout.

Therefore, we must have external file with styles that will be applied to absolutely all pages. But besides this, there may also be additional CSS files that allow, for example, different sections of a web project to look a little different.

Consequently, overflowing the left or right column will not cause a proportional increase in the blocks with ID vnutr and vnesh (floating elements do not affect the height of their parents or, in other words, containers), which means the content will crawl beyond them, run over the footer and generally go beyond the boundaries layout. Trouble.

But we have a fourth block element with ID podporka, which does not contain any content (and therefore will not be visible on the web page) and which is intended specifically to eliminate this incident. In the obdhiy.css code we will write a simple rule for this selector. As a result, the block with ID podporka will acquire a useful property for us - it will take into account any element floating in front of it (meaning, located higher in the code).

That. when increasing the content in the right or left column, the element with ID podporka will be proportionally shifted down, and since this tag is no longer floating, then blocks with ID vnutr and vnesh will take it into account and proportionally increase their vertical size:

Now everything seems to be working correctly. However, our site layout is not finished yet. Let's say that we have done in index.html this way the layout home page, but for some other section the appearance of the layout will have to be different(for example, there should be not three, but only two columns). How to get out of this situation?

It is clear that for this purpose you will have to use a file different from index.html. To do this, the contents of index.html can be copied to a new file, for example, razdel.html, because edit already existing code It will be easier than writing it again.

Well, we will have to use a new file with cascading style sheets, for example, razdel.css. It is in them that we will make changes, and at the same time we will look in more detail at how exactly use the @import directive in such cases.

Let's start with razdel.html:

...

We changed the title of the page Title and changed the name of the included style file to razdel.css. In this case, naturally, you will need to create this same style markup file in the CSS folder. I dare to remind you that for index.html we connected style markup via osnovnoy.css, which contained one single @import directive for loading rules from the obdhiy.css file:

@import url(obdhiy.css);

We will not be original in our smart mileage and at the very beginning of a new (still empty) style file Let's write exactly the same directive. Thus, we will again get a three-column layout, however, by adding just a few rules a little later, we can easily turn it into a two-column one. Not even that. We will create another file in the CSS folder called dvekolonki.css and the following content:

#right ( display:none; ) #center ( margin-right:0; ) #vnesh ( background-image: none; )

What have we done? We have prohibited displaying right column to web pages using . We also removed the outer space on the right for the central column, because it is no longer necessary. Well, in conclusion, we banned the show background picture all in the same right column. In general, we completely annihilated this right column in our section layout.

Well, now to complete the layout of the two-column layout, all that remains is to include this same dvekolonki.css in the razdel.css file, the final content of which will now look like this:

@import url(obdhiy.css); @import url(dvekolonki.css);

All the rules in the code below (from dvekolonki.css) will have a higher priority, which means it is their action that we will observe on the web page. As a result, when you open razdel.html, you can already see a two-column layout:

Actually, our additional task was to consider options using the @import directive in modern website layout, which I think we managed.

Now it remains to demonstrate the operation of the @media directive, which I mentioned at the beginning of the article. It has a very indirect relation to layout, but still it would probably be short-sighted not to talk about it.

Layout for printing using the @media directive

The @media directive may be useful not for you, but for your readers who want to print a web page without any graphical frills or unnecessary information. Users will only need the content that is located in the central column. It doesn’t need a header, footer, left or right columns—only the text of the article.

At preview print in any of modern browsers You can, of course, disable background printing, i.e. color design, but the browser will not always be able to separate the wheat (content) from the chaff (navigation) on its own, so we will have to help him with this so as not to hope for chance.

In addition, when printing, the main thing that makes the Internet so popular will disappear - the ability to follow hyperlinks to other pages. On paper it's all yours hyperlinks will become completely uninformative, if this is not taken care of in advance. Let's add hyperlinks to our three-column layout and see how it looks when we try to print a web page.

Thus, the user who prints out such a web page will never know which blog is the best. So let's get busy nuances of layout for printing, and the already mentioned @media directive will help us with this.

There are two ways to specify using media which device these styles should be applied to. You can specify the media attribute in the Link tag, which is used to connect external style files. But in this case, the browser will make an extra request to the server, which is not good. However, this method has a right to life and this disgrace will look something like this:

At the media attribute Other values ​​can be used:

1. all is the default and means that this file styles will need to be used for absolutely any output devices
2. braille - finger reading devices (for the blind or visually impaired)
3. handheld - PDAs, smartphones and other small items
4. print - printers
5. screen — user monitor screens on which they will view your site
6. speech - speech browsers
7. projection - projectors
8. tty - teletypewriters and other junk on which pixel dimensions cannot be used
9. tv - good old TV

In the example given just above, we, using the Media attribute, connected to the web document separate file styles for display on the monitor and a separate one for printing (print.css). This is exactly what we need to implement in this layout lesson, but it would be better to do it in a slightly different way, using the @media directive written in the style file.

If you noticed, with this layout method that we chose (using @import), we have a common style file, which is always connected through this very directive - obdhiy.css. This is where we will begin to conjure.

@media has its own syntax:

@media screen, tv (a set of selectors and rules that will be executed only if the web page is output to the devices specified just above, separated by commas)

In our obdhiy.css file we will not include all the existing rules inside the @media screen directive; it is enough to simply add the necessary ones at the very end CSS rules to print a document using @media print:

@media print( *( color:#000 !important; background:transparent !important; ) html ( font:10pt serif; ) #footer, #header, #left, #right ( display:none; ) #center ( margin: 0; ) a:after( content:" (" attr(href) ")"; ) )

If you remember, the selector * means applying all these style rules to absolutely everyone HTML elements code. True, such a selector has the minimum possible priority, so by setting the color for all elements to black and the background to transparent, using the color and background rules, we are forced to avoid calculating priorities using the setting.

For the Html selector, we specified the default font in , because it is clearer for the printer. Well, the font was set to any serif (serif). Using display:none, we prohibited the display of the body (header, footer and columns), and using margin:0, we allowed the content from the middle column to occupy the entire available space in width.

Last selector a:after is tricky and, in order to better understand what exactly he is talking about, I advise you to go through the following publications about () and. But we need it for a rather simple purpose - see on paper exactly where hyperlinks lead.

The after pseudo-element allows content to be generated while the browser is building the document. After will allow us to add URL address hyperlinks immediately after the place where this very link is placed. This is done using a special CSS content rule, which only works for two pseudo-elements: after and before.

Website layout is the process of combining HTML code and CSS tables based on a previously selected design solution. The primary sign of quality final result is the correct display of the resource as in all popular browsers, and on .

There is no point in reminding that a successful web project is characterized by stable functioning and provision of constant access to its content. This can only be achieved if the HTML layout is:

Cross-browser;
- adaptive;
- contain minimal amount code;
- promote high loading speed of web pages;
- be based on the use of HTML tags solely according to their purpose (consistency and hierarchy of the system for introducing elements is also considered an integral requirement);
- valid (compliance of the site code with generally accepted technical standards W3C).

Kinds

Now let's start looking at the types of HTML layout.

1. Static (fixed) layout. The specifics of the application differ in that the width of the web pages will be identical when operating the site as on mobile gadget, and on a desktop PC. In the case when the monitor resolution is high and the Internet browser window is maximized to fill the entire screen, then you can see free (non-functional) space on both sides. As for portable devices, with static layout the user sees a scroll bar at the bottom of the page.

2. The fluid type of HTML layout involves filling the entire screen of the device with the page. And here it doesn’t really matter where exactly you view the content. The initial page parameters (size, for example) also do not affect anything. Since web elements take up everything free space, the process of developing a user-friendly design becomes significantly more complicated.

3. Tabular layout involves creating HTML code by creating a set of tables. It looks something like this: first, a main table is produced, in which there are many cells. They contain the following package of tables (if necessary). And so on ad infinitum. As a result, the code turns out to be quite voluminous, making it difficult for the webmaster to subsequently correct or change it.

HTML tabular layout is, as a rule, rarely used these days. The main disadvantage is the slow indexing of the site by search engines. In principle, it is possible to place several tables on a page, but we would not recommend using them as part of building the structure of the components of a web project.

4. Layout with web blocks (or div layout). It is believed that this is the most common way of constructing websites today. The grid is formed using tags