This will happen because the browser already has its own styles for elements that are applied by default to pages opened in it. And the fact is that in different browsers these rules differ slightly, from browser to browser. About 10 years ago these differences were quite dramatic and very noticeable. Now they are minimal, but they still exist.

To remove these differences and make the page display the same in all browsers by default, use a special .css file: reset.css or normalize.css

reset.css - what it does and how to use it

The first file to appear was reset.css. This css file contains a list of all possible html tags, and resets their value to zero. That is, it removes all possible indents, makes the font the same in all tags, resetting all text styles. So all headings and paragraphs are displayed in plain text, one size and without indents. As a result, we get the default styles reset in all browsers.

It works like this: first we include the reset.css file on the page, and after it our own file with styles. As a result, we first reset all the styles, and only then set the design of the html tags in style.css. This way we achieve that all browsers will reset their styles to default, and all markup will be based on the styles that we set in style.css.

Download reset.css

You can download reset.css at cssreset.com

Or you can download the version Eric Meyer’s “Reset CSS” 2.0 on the button below, from my blog:

normalize.css - how it works and what is the difference

After reset.css is connected to the page, all styles have to be re-written. And every time this activity gets tiring. Therefore, reset was replaced by another tool - normalize. Normailze - as the name implies, does not reset all styles, but normalizes them, bringing them to a single look in all browsers. After its application, the basic styles for displaying headings, font sizes, indents... are unified and displayed identically in all browsers. Using it, you can save a certain amount of time, which in the case of reset would be spent on writing reset styles.

If you haven’t used normalize.css yet, I recommend trying it in your next project, and who knows, maybe you won’t be able to refuse it 😉

Download normalize.css

You can download normalize.css from necolas.github.io/normalize.css

Or download from my blog:

What is better reset or normalize?

There is no clear answer.

The first one resets all styles, the second one leads to a single denominator. Experienced layout designers who use reset.css usually have their own sets of styles that are immediately included after reset to style the content. And they don’t have to re-define styles for basic elements every time in a new layout. That's what I do too. I am comfortable and I know what styles I set by default and how they work.

normalize is convenient if you study its structure, you can modify it for yourself - by adjusting the basic appearance tags And working with it will also be convenient on the fly - when you have to do a lot of typesetting and often.

Every tool is good, the main thing is to use it correctly 😉

Cross-browser compatibility usually refers to the ability of a website to look the same (or equally good) in all browsers.

In order for the site to look as identical as possible in all browsers (modern + support for some outdated ones), you need to know various techniques and features of browsers. We will study them now.

Block. Modern browsers

The following browsers are currently popular: Internet Explorer (abbreviated as IE, a browser from Microsoft, built into Windows), Opera(Norwegian browser) Mozilla(aka Firefox) Google Chrome (browser from Google), Safari(Apple browser). Browsers in mobile devices: Android, IOS.

Block. Browser engines

In addition to browsers, there is such a thing as engine browser. The engine is the core of the browser, which converts HTML and CSS into a visible image on the screen. There are much fewer engines than there are browsers and, as a result, many browsers have the same engines and therefore the same features and bugs (problems).

Types of engines: Gecko(Mozilla/Firefox). Webkit(Safari, Google Chrome, Opera 14+, Android, IOS). Presto(Opera up to version 14). Trident(Internet Explorer).

Please note that Opera, starting with version 14, switched to the engine Webkit.

Currently Webkit split into two engines Blink from Google Chrome and Opera 14+ and engine from Safari. These two engines still support the prefix -webkit, however, their separation can already be seen in some CSS properties, for example, hyphens

The Internet Explorer browser officially no longer exists; its latest version is the 11th. However, in fact, this browser has changed its name (but not the engine) and is now called Edge.

Block. Vendor prefixes

The current situation among browsers is that before a CSS property appears in the specification, browsers may implement trial version this property with a special prefix called vendor prefix(from the word vendors - developers, prefix of developers).

Let's look at what this looks like using the example of the box-sizing property (changing the block model).

P ( box-sizing: border-box; )

This property was only supported in Firefox 29, but since Firefox 2 it has been available with the prefix -moz:

P ( -moz-box-sizing: border-box; )

Other browsers have similar prefixes: -moz- Mozilla/Firefox (Gecko engine), -webkit– browsers based on the Webkit engine (Google Chrome, Safari, Opera 14+, Android, IOS), -o– Opera up to version 13 inclusive (Presto engine), -ms– IE from version 8+.

Thus, the most cross-browser option for the property is box-sizing, using vendor prefixes, will look like this (there is no need to write it with the -ms prefix, IE immediately switched to supporting this property):

P ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; )

In CSS, many properties have a similar implementation: with or without a prefix.

Please also note that Opera has switched to Webkit from version 14 and will now use the prefix -webkit, and the prefix -o will remain only for older versions (up to 14th).

There is the following rule: properties with prefixes are written before properties without a prefix. This is done so that the main property will override prefixed properties, since the browser can support a property with or without a prefix. And a property with a prefix may work with some problems.

Currently, some browsers have decided to abandon prefixes due to their inconvenience. And now instead of them they use the so-called flags. The properties are now embedded in the browser but are disabled by default, however they can be enabled in the browser settings by checking the appropriate box in the preferences. Currently browsers Google Chrome And Opera for new properties this model is supported.

Block. Where can I see what prefixes to write?

I recommend a special service caniuse.com, where you can see what properties can already be used and whether you need to write prefixes for them or not.

Block. Browser statistics

In order to know which browser should be supported currently, and which one should be abandoned, you need to track statistics on browsers in the region of the site. This can be done using the following service: gs.statcounter.com - all browsers with versions by country (english).

Block. How to test a site in different browsers

After creating a site, you need to test it in all popular browsers. However, doing this is not as easy as it seems - not only do browsers differ from version to version, but there are also differences between one version of the browser on Windows and, for example, Linux. It is clear that it is simply impossible to have such a number of browsers.

Special services come to the rescue that take screenshots of the site in different versions of the site.

Block. Normalization of styles

In addition to discharges, there is the so-called normalization- this is when property values ​​(for example, margin and padding) are not reset to zero, but certain convenient values ​​are specified (so that the default padding is the same and convenient in all browsers).

1. Remember that resetting styles must be done before connecting your styles, and not after!
2. CSS Reset should be moved to separate file(usually called reset.css). That way, you can use it in different projects without having to put any effort into separating it from other CSS rules.
3. Don't be afraid to modify reset.css itself. Adapt it to yourself, make it work for you. Change, rearrange, remove and add as needed in your specific case.
4. It makes sense to add default styles for h1-h6 (eg font size), for td (make text-align: center), etc.

What should you do next:

Start solving problems using the following link: problems for the lesson.

When you decide everything, move on to studying a new topic.

From the author: people use different browsers to view web pages. Of course, there are the most popular ones, such as Chrome. There are also less used ones (Safari, Internet Explorer), but if you are making a website for people, you should know about cross-browser compatibility - how to do it and what it is all about. Let's look at how to ensure that your site displays the same on all major browsers.

The main goal of cross-browser functionality is to prevent significant changes in site design in different web browsers. If the difference is only in small details and this does not affect the overall perception of the site, then we can say that you have dealt with the cross-browser problem. But still, what real advice can be given on this matter?

How to achieve cross-browser compatibility

At the moment, there are 5 main most popular browsers for which you need to optimize your site. And if it’s usually easy to make friends with the newest versions of web browsers, then why older version, the more problems there may be.

For example, IE6 is one of the most problematic browsers in terms of supporting new html tags and css properties. And yet, some today still require the site to display normally in this browser. In my opinion, this is already too much. IE8 support is sufficient.

However, this small retreat. Now let's look at the real steps that will help make your site cross-browser compatible.

Make the most of ready-made solutions. If you want to implement new properties and teach older browsers to understand them, you will need JavaScript libraries. In this case, there is simply nowhere without them. You must install jQuery.

There is such a wonderful javascript library called Modernizr. Its capabilities allow you to implement an alternative for those properties that are not supported. This is what I recommend you use too.

So, first you need to go to the official website. https://modernizr.com/download. Here you need to tick off the technologies that you plan to use on your website. It must be said that the list is quite long and without an average knowledge of modern web standards and English language you can hardly figure it out. In any case, there are also intuitive properties. Even if you check all the boxes, the resulting code will not be too cumbersome.

Rice. 1. Selecting technologies that the library will check.

Checking the library's operation

After downloading the custom version of the library, you need to check its operation. It will need to be connected using a script tag, indicating the path to the file. If everything is correct, then the html tag should have many new style classes. These classes are named after the technologies that you have checked.

>p?Accordingly, if such a class is indicated in the html tag, it means that the technology works in this browser. If something is not supported, then the class “no-name of technology” will be registered. Let me give you an example right away:

For example, you need to check the box-shadow property. For reference, it sets the shadow of the element. If the browser supports it, then this style class will appear in the html tag. If web browsers do not recognize the property, the class “no-boxshadow” will appear.

Rice. 2. You will see many classes in the html tag. In this case, we see that the browser supports almost all technologies.

Now the control of cross-browser compatibility is completely in your hands. It is enough to set the no-boxshadow class some alternative properties and in all browsers that do not support the box-shadow property, these rules will be applied instead. It's very convenient.

I found another example on Habrahabr that I would like to give you here. There was an example of how the library can be used to implement alternatives in older browsers.

Multiplebgs selector ( background-image: url("image.png") center 40px no-repeat, url("image2.png"); ) .no-multiplebgs selector ( background-image: url("image.png") center 40px no-repeat lightgray)

Example explanation. We are interested in the technology of multiple backgrounds, which have long been supported in CSS3. To do this, just list the addresses of the pictures and their parameters separated by commas. Naturally, older browsers do not support this, so we write our own styles for them using the .no-multiplebgs class. It specifies that styles should be applied if the browser does not support multiple backgrounds.

Thus, you can set other styles for this selector and thus get a beautiful display of the site in any web browser. Of course, to fully experience the capabilities of Modernizr, you need to have a good understanding of web programming and website design. An experienced person will be able to determine which properties can replace those that are very poorly supported.

Of course, the functionality of the library is much wider. You can test support for various technologies and link events to the result. Example.

We have released a new book “Content Marketing in social networks: How to get into your subscribers’ heads and make them fall in love with your brand.”

Cross-browser compatibility is the ability of a web resource to adapt to several browsers and display correctly in them.

More videos on our channel - learn internet marketing with SEMANTICA

For example, you made a website for your online store. You have created a beautiful design that is pleasing to the eye. But users access your site through different browsers. Some people actually use a smartphone. And if you have not checked the cross-browser compatibility of the resource, it may happen that the site will not display well in some browsers.

Elements may move out, pictures may not be displayed, and fonts will become ugly. A person will not use such a service. He will continue searching.

The task of the site developer is to make it so that, regardless of the browser and device, the resource is displayed correctly.

Cross-browser layout

There is competition between browsers. Previously, everyone tried to add exceptional features and options. This resulted in HTML standards being no longer followed and each browser rendering pages differently.

Netscape Navigator dropped out of the race, giving the monopoly to Internet Explorer. Almost simultaneously, projects began to gain momentum Mozilla Firefox(Gecko), Google Chrome (Blink), Opera (WebKit) and Safari (WebKit), dividing the market among themselves and forcing the community to think about the issue of cross-browser compatibility of their sites.

All Internet users use special programs– browsers. A browser is a program that communicates between the user and the server. The browser sends requests to the server and receives responses from it, and this response is converted into the form that everyone is used to calling an Internet page with all its content, text, images, videos, etc. The finished appearance of the page (content location, dimensions, color, font, etc.) is set using using HTML layout and cascading style sheets (CSS), which were converted from an image drawn by a designer into a form understandable by the browser. This is called layout. In simple words HTML layout is the arrangement of the elements of an Internet page, where they should be located according to the designer who created the layout of the future page.

But every user prefers a browser that is more familiar to them. Nowadays, there are 5 most popular browsers, which are indicated by statistics. These are Chrome, Safari, Opera, FireFox and Internet Explorer (IE). These browsers of one version or another are most often used by Internet users to browse the World Wide Web. Each of these browsers has its own functionality and its own characteristics of displaying Internet pages.

In the wide variety of all browsers and their versions, and their features of displaying Internet pages, the concept of cossbrowser HTML layout appeared. So what is cross-browser compatibility?!

Cross-browser compatibility– this is the property of Internet pages to be displayed equally in different versions of browsers, without distortion and “spreading” of page elements, regardless of the characteristics of the browser itself.

The largest number of these features have Internet browsers Explorer from Microsoft, which is why most HTML coders “don’t like” them, and are inventing them for it different ways leading to correct display pages (these methods are called “crutches” by layout designers). Our personal opinion is that it is possible to create an HTML page cross-browser without using these very “crutches” that clog the HTML code of the page.

Conditional comments for Internet Explorer

Basic rules of cross-browser layout:

It's no secret that each browser has its own design styles for certain HTML elements code, font size, indentation size, etc. which will lead to the spread of page elements, and it will not be cross-browser.
From this we can conclude that all custom styles different browsers you need to “disable”, or rather reset to the same ones. Some HTML coders do this directly when setting CSS styles for individual elements, but we use a different practice. We reset all browser CSS styles at the very beginning CSS document. To do this, we use a modified set of CSS styles proposed by meyerweb.com

Reset CSS styles

This code, added to the CSS styles, resets all browsers' own styles to the same. This will allow you to make the layout HTML pages identical in all browsers, regardless of their own styles.

HTML Document Validity

The second rule of cross-browser HTML layout is compliance with the HTML and XHTML standards approved by the W3C consortium. Each HTML document (namely a document) has its own standard and its own writing features.

We will look at the types of HTML document standards and their differences later, since this topic requires separate consideration and description.

Validity HTML document is in compliance with the approved standards and norms of the W3C consortium.

According to W3C standards, each HTML tag document must have its own pair. These pairs are called opening and closing tags, but there are exceptions to this rule - these are tags ,
etc., these tags do not have a closing pair.

A non-closed paired tag, each browser can understand in its own way, and will display the content enclosed in these tags in a way that is not intended by the layout designer.

You can check the validity of an HTML document on the W3C consortium website.

Valid code example:

Valid HTML code

This HTML code complies with XHTML 1.0 Strict standards and is valid
And contains both paired (closing) tags and an unpaired tag

Example of invalid code: