An HTML coder should know: a sign of professionalism is the same display and functioning of a site page in any browser, at least in the “big three”, which include the browsers Internet Explorer, Opera, Mozilla Firefox. The process of verifying the correctness of the site display consists of three main stages.
It is necessary
- • Several browsers installed on the computer.
- • Attention.
Instructions
Step 1
Stage one, preparatory
The preparation process consists in downloading the browser distribution kit and installing it on the computer. Any installation process ends with the question: "make this browser included by default?". So, the main one, or included by default, you need to make the one that occupies an intermediate position in terms of the size of possible "jambs". According to the experience of many generations of layout designers, this is the Opera browser.
Having installed several browsers on your computer, proceed directly to the comparison process. To do this, hover over the file with the.html extension, which will be the basis of the website page or the whole template, and click on it with the right mouse button. In the tab that opens, select "open with", and then select the type of browser you want. The file can be opened in several browsers at once, leaving them minimized on the desktop taskbar, and opened as needed.
Step 2
Stage two - visual comparison
Visually, the pages of the site in the browser may differ in three main parameters:
1. By the amount of indents and margins between page elements. IE is particularly sophisticated in calculating the true values of the padding and margin properties.
2. Different browsers display fonts differently, even standard fonts such as Arial and Times New Roman. This is the hardest hit for menu item lines, which can be displayed in two lines or completely wrap to the second row.
3. Correctness of displaying pictures. In the simplest cases, some browsers, such as Opera, do not read the vspace and hspase properties specified in the tag attributes
… Sometimes pictures are not centered in table cells if the attributes
this condition is not spelled out. But the main trouble for the layout designer is preparing the.png
Stage three - functional check
At this stage, you need to check the "drop-down" menu items. In their work, there should be no jerks, slowdowns, and most importantly - a jump in the general content of the page when opening individual menu items. The same applies to the text elements of the page, which are fully expanded when you click on the button or the inscription "more".
In conclusion, I would like to say that the struggle for "cross-browser compatibility" - this is the name of the property of a page to be displayed everywhere in the same way, the process is complex and exciting, requiring a lot of practical experience.
Step 3
Stage three - functional check
At this stage, you need to check the "drop-down" menu items. In their work, there should be no jerks, slowdowns, and most importantly, a jump in the general content of the page when opening individual menu items. The same applies to the text elements of the page, which are fully expanded when you click on the button or the inscription "more".
In conclusion, I would like to say that the struggle for "cross-browser compatibility" - this is the name of the property of a page to be displayed everywhere in the same way, the process is complex and exciting, requiring a lot of practical experience.
