| Lesson 10 | Display and performance |
| Objective | Identify how Browsers and Platforms affect Display and Performance. |
Identify how Browsers and Platforms affect Display and Performance
Although Web pages are designed with particular fonts and colors, it does not mean the pages will be viewed with the same fonts or colors.
Certain display options such as fonts, font size, and background color can be altered by users in the browser preference file. There are multiple cross-browser and cross-platform compatibility issues you should be aware of as you create Web pages, including:
When Microsoft Internet Explorer was the dominant browser and had 90% market share, there was nothing much to do but regard the browser as a "black box". Today we have open source browsers with more than half of the usage share and it is a good time to take look under the rendering engine's hood and see what is inside a web browser. There exists alot of C++ code. As a web developer, learning the internals of browser operaions helps you make better decisions and know the justifications behind development best practices. We recommend you spend some time digging in; we guarantee you will be glad you did.
When Microsoft Internet Explorer was the dominant browser and had 90% market share, there was nothing much to do but regard the browser as a "black box". Today we have open source browsers with more than half of the usage share and it is a good time to take look under the rendering engine's hood and see what is inside a web browser. There exists alot of C++ code. As a web developer, learning the internals of browser operaions helps you make better decisions and know the justifications behind development best practices. We recommend you spend some time digging in; we guarantee you will be glad you did.
Main Functionality of the Browser
The main function of a browser is to present the web resource you choose, by requesting it from the server and displaying it in the browser window. The resource is usually an HTML document, but may also be a PDF, image, or some other type of content. The location of the resource is specified by the user using a URI (Uniform Resource Identifier). The way the browser interprets and displays HTML files is specified in the HTML and CSS specifications. These specifications are maintained by the W3C (World Wide Web Consortium) organization, which is the standards organization for the web. For years browsers conformed to only a part of the specifications and developed their own extensions.
That caused serious compatibility issues for web authors and today most of the browsers more or less conform to the specifications.
Browser user interfaces have a lot in common with each other. Among the common user interface elements are:
Whenever possible, consider providing alternatives. For example, allow users to select the browser plug-in appropriate for their platform. This may involve additional HTML coding and/or converting a movie clip into different formats.
For a list of browser versions and their coding compatibilities, see
The next lesson concludes this module.
- Address bar for inserting a URI
- Back and forward buttons
- Bookmarking options
- Refresh and stop buttons for refreshing or stopping the loading of current documents
- Home button that takes you to your home page
Whenever possible, consider providing alternatives. For example, allow users to select the browser plug-in appropriate for their platform. This may involve additional HTML coding and/or converting a movie clip into different formats.
For a list of browser versions and their coding compatibilities, see
- Mozilla.org,
- nodejs.org, and
- CPlusOOP.
The next lesson concludes this module.
Analyze differences between Browsers
Open Internet Explorer and Firefox browser windows to the following two sites:
- How does msn.com display differently in Microsoft Edge and Firefox?
- How does HTML5 display differently in Microsoft Edge and Firefox?
Do the sites load more quickly in one browser or the other?
Look for changes in display colors, fonts, screen sizes or frames may be different as well.
- Which elements seem to keep a consistent format between browsers?
- Do HTML tags and tables look the same?
- Do graphic, audio, and video files load and appear the same way?
- Are the same plug-ins available and working?
The four major browsers (Chrome, Microsoft Edge, Firefox and Safari) recently added private browsing modes to their user interfaces.
Loosely speaking, these modes have two goals. First and foremost, sites visited while browsing in private mode should leave no trace on the user's computer. A family member who examines the browser's history should find no evidence of sites visited in private mode.
More precisely, a local attacker who takes control of the machine at time T should learn no information about private browsing actions prior to time T.
Second, users may want to hide their identity from web sites they visit by, for example, making it difficult for web sites to link the
user's activities in private mode to the user's activities in public mode. We refer to this as privacy from a web attacker.
While all major browsers support private browsing, there is a great deal of inconsistency in the type of privacy provided by the different browsers.
Firefox and Chrome, for example, attempt to protect against a local attacker and take some steps to protect against a web attacker, while Safari only protects against a local attacker.
Firefox and Chrome, for example, attempt to protect against a local attacker and take some steps to protect against a web attacker, while Safari only protects against a local attacker.