Cross browser
Cross-browser refers to the ability of content embedded in websites (in particular cascading style sheets (CSS) and JavaScript ) to generate the same output or to behave largely identically , regardless of the respective browser type and operating system .
Compliance with web standards
The need for cross-browser capabilities has grown over time and originates partly from the time of the browser war between Microsoft and Netscape and partly from the different interpretations of various standards in market-leading browsers. In addition, the desire of many web designers and developers for pixel-perfect positioning of individual elements plays a major role.
Problem
The result is websites that only deliver the desired result on certain browsers, while they have unsightly display errors on another manufacturer's browser or, in the worst case, do not work.
As a consequence, web designers have to strive to keep their content executable on all major browsers, which can be a time-consuming trial-and-error process.
view
With the DOM , a standard object model of the W3C, a considerable step has been taken in a unified direction, but there are still major differences and inadequacies, especially in the coding of events.
Examples
Basic knowledge of HTML and JavaScript is required to understand the following code examples .
JavaScript
<div id="sample" style="position: absolute; top: 100px; left: 100px;">Beispieltext</div>
The code describes a block of text that should be displayed in the upper left corner of the web page 100 pixels from the top and 100 pixels from the left. In the browsers of the 4 series of the Netscape Navigator you could move this text block with JavaScript:
document.layers['sample'].left = 200;
However, this code would not work in Internet Explorer 4. Instead one would have to use the following notation:
document.all['sample'].style.left = 200;
To make the code cross-browser compatible, it would have to look like this:
if (document.all) document.all['sample'].style.left = 200; else if (document.layers) document.layers['sample'].left = 200;
The following code uses the DOM , a standard model of the W3C that is supported by all modern browsers (e.g. Mozilla Firefox , Internet Explorer , Opera , Apple Safari , etc.):
document.getElementById('sample').style.left = '200px';
Cascading style sheets
The following code causes a minimum height in block elements:
<div style="min-height: 200px;">Beispieltext</div>
Internet Explorer up to and including version 6 interprets the min-height specification incorrectly or not at all, which is why the size of the element in these browsers depends on the content.
The following information describes the size and spacing of a div element:
<div style="width: 200px; height:50px; padding: 10px; border: 5px solid red;">Beispieltext</div>
Again, because of the box model bug, Internet Explorer can not display the div element correctly when the document is rendered in Quirks mode : Contrary to the specification, the total width in the browsers concerned is 200 pixels (a total element width of 230px would be correct ).
See also
Web links
- QuirksMode - Differences between modern web browsers and how to get around them.
- X - JavaScript library with many demos.
- Crosscheck - JavaScript module test framework that simulates browser environments for a variety of platforms.
- BrowseEmAll - desktop application that enables testing in many browsers and on mobile devices.
- Equafy - cross-browser test on different browsers, platforms and screen resolutions. Cloud based.