The document discusses browser compatibility and the importance of testing websites across different browsers. It notes that browsers can interpret HTML and CSS differently, so pages may look different in various browsers like Internet Explorer, Firefox, Safari, and Chrome. It recommends testing websites in multiple browsers to ensure compatibility. Various tools for browser testing are also described, such as browser emulation applications, Dreamweaver, Adobe BrowserLab, and Microsoft SuperPreview. The document emphasizes the importance of browser compatibility testing to avoid layout issues and bugs.
1. Web Authoring
Topic 26 –
Browser Compatibility & Security
2. Objectives
Students should able to:
1. Describe the necessity of performing a
browser compatibility test.
2. Follow procedures to ensure the browser
compatibility of websites.
3. Browser Compatibility
Browser testing is necessary because
different web browsers render HTML and
CSS code differently.
If you’ve tried using different Web browsers
to surf online, you’ve probably noticed that
the same sites look a little different
depending on which browser you’re using.
4. Browser Compatibility
That is because page display varies
according to browser compatibility.
Browser compatibility is the ability of the
Web browser to properly interpret the
hypertext markup language (HTML) that
renders Web pages.
5. Browser Compatibility
Most sites are designed to look correct in
Microsoft’s Internet Explorer, because it is
believed to be the most ubiquitous
browser.
However, if you are a Web designer, your
task is to code a site for maximum
browser compatibility so that the pages
look correct in other popular browsers
such as FireFox, Safari, Google Chrome,
etc.
6. Browser Compatibility
Browser compatibility creates potential
headaches for webmasters.
As newer popular scripting languages
create flashy Web pages, older browsers
may not understand the new code.
For security reasons, many people disable
scripting languages in their Web browsers,
reducing browser compatibility.
7. Browser Compatibility
Aside from the difference in browsers,
another factor that plays into browser
compatibility is whether the surfer is using
a standard PC and Windows, Linux, or a
Mac computer.
The same browser will render the pages a
little differently from each of these
platforms.
8. Browser Compatibility
Why browser testing is important?
A web browser is a program that renders
HTML, CSS and Javascript files according
to a set of rules built into the application.
Although web browser manufacturers use
the recommended guidelines of the World
Wide Web Consortium’s specifications for
HTML and CSS, they can interpret these
rules as required for their own purposes.
9. Browser Compatibility
Are web pages required to look the same
in all browsers?
In the case of technical
considerations, you must determine
whether you could achieve your goal of
making a web page look the same. For
example, the earliest browsers, such as
Internet Explorer 3 or Netscape 3, do not
support cascading style sheets.
10. Browser Compatibility
Are web pages required to look the same
in all browsers?
In the case of time/budget considerations,
you might find technical solutions to make
your pages look the same, but if it takes
you more time than you have allotted to
identify and fix the problem you should
determine whether the solution is worth
it.
11. Browser Compatibility
Attempting to make web pages look the
same in multiple browsers is not as
important due to several reasons:
- People browse the web in different ways.
- Monitor resolution. A website on a 17-
inch monitor never looks the same as on a
27-inch monitor.
12. Browser Compatibility
- Text resizing. Users can override the
page layout by increasing or decreasing
text size.
- Mobile devices, which represent a
growing proportion of web browsers.
- Client expectations, as clients are quite
often less technically oriented than the
web designer.
13. Browser Compatibility
Choose the level browser of browser
support you want
The level of browser use partially accounts
for your decision to support it. The choice
of which browsers to support becomes
more difficult with more recent browsers.
14. Browser Compatibility
Browser Statistics
Locating an accurate number of the web
browsers currently in use today is difficult.
Individual websites can gather accurate
information on their user’s browser
version. Visit to some of the sites listed
below for an accurate estimate.
www.statowl.com
www.w3schools.com/browsers/browsers_stats.asp
15. Browser Compatibility
Tools to identify browser problems
The first step in testing your page design is
to view it in the desired browser.
However, this is not always easy, for
various reasons.
16. Browser Compatibility
• You might not have access to the
browser, which is a common problem
when testing for cross-browser
compatibility. Cross-browser refers to the
ability for a website to support all the web
browsers.
17. Browser Compatibility
• Different windows operating system
might not allow multiple versions of
Internet Explorer to be installed on the
same system.
A common solution is to have access to a
separate computer.
Many web designers invest in an
inexpensive computer mainly used for
testing.
18. Browser Compatibility
However, this option may not be practical
for several reasons:
• Inefficiency. There might be a time lag
involved in continuously changing
computers.
• The debugging process involves
making many small changes. It could
become tedious to change computers
after every change.
19. Browser Compatibility
Virtualization solutions for Windows
If a Windows computer is your primary
device and you need to test your designs
on a Mac, you will need a separate
computer.
You could have Windows 7 with a modern
browser as your primary system, and a
virtual machine that runs Windows XP
with Internet Explorer 6.
20. Browser Compatibility
Windows Virtual PC
Windows virtual PC is Microsoft’s native
virtualization tool that allows you to install
one or more virtual machines on your
system.
You need sufficient system resources, such
as hard-drive space and memory, to make
this a viable option.
21. Browser Compatibility
Browser compatibility applications
An alternative is to use a browser testing
application or service whose only job is to
test web pages. Although the details
differ, the basic concept is the same: to
provide “snapshots” of your web pages in
different browsers.
22. Browser Compatibility
Dreamweaver CS5
Dreamweaver CS5 has a new feature that
will help you track down the most
common bugs – and give you the fix for
them as well. It is called Check Browser
Compatibility and it is accessed through
the Check Page icon in the Standard
toolbar.
23. Browser Compatibility
Adobe BrowserLab
BrowserLab lets you preview your page in
a number of different browsers and
platforms, so you are not limited to Mac
or PC. The basic steps are to enter the URL
of the page you would like to preview to
generate a screenshot of the page. You
can then compare the screenshots if you
define multiple browsers.
24. Browser Compatibility
Microsoft SuperPreview
SuperPreview is a Windows platform that
only uses the browsers installed on a local
system, but it also has a network feature
similar to BrowserLab to let you view your
page using Safari on OS X.
SuperPreview will not solve the layout
issues, but it helps you to easily identify
them.
25. Web Application Security
Common vulnerabilities
Some of the vulnerabilities you'll be
looking for is:
By far the most popular: cross-site
scripting (XSS). XSS results from malicious
scripts being injected into a Web site.
26. Web Application Security
Common vulnerabilities
SQL injection is the second most popular
vulnerability, primarily because of the
growing dependence Web sites have on
databases.
27. Web Application Security
Common vulnerabilities
SQL injection is actually quite simple:
By finding a Web site that connects to a
database, malicious hackers execute an
SQL query in a place that the developer
never intended for the purpose of
bypassing authentication or manipulating
data.
28. Web Application Security
WebScarab
WebScarab is first and foremost a proxy
used to analyze browser requests and
server replies.
In addition to serving as a tool for packet
analysis, you can use it to "fuzz" sites,
looking for some of the same exploits as
mentioned.