Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
In this video, you'll learn about all the major web browsers currently available. You'll also learn more about the role a web browser plays in creating websites.
-
0:00
[?mellow guitar music?]
-
0:07
Web browsers come in many flavors and varieties,
-
0:10
and if you're creating websites, it's important to be aware of what's out there.
-
0:13
Let's take a look.
-
0:15
There are many different browser layout engines
-
0:17
and perhaps even more browser vendors.
-
0:19
There are so many browsers out there, in fact,
-
0:22
that we're just going to focus on some of the major ones.
-
0:24
There are numerous reasons to be aware of all of the browsers available.
-
0:29
For one, it can greatly impact the end-user experience,
-
0:32
which is what this is all about.
-
0:34
However, the primary thing to be aware of
-
0:37
is cross-browser compatibility, which I talk all about
-
0:41
in the chapter on Browser Testing.
-
0:43
Often times, your website will look different when displayed in different browsers,
-
0:49
so let's go over some of the major options
-
0:52
that users have in the browser market today.
-
0:54
First up is Internet Explorer.
-
0:56
For most developers, IE can be painful to deal with,
-
0:59
especially older versions.
-
1:01
Historically, Microsoft has been slow to adopt draft specifications
-
1:06
and new browser technologies.
-
1:08
Additionally, older versions of Internet Explorer
-
1:10
have many bugs in their implementation
-
1:13
of W3C specifications.
-
1:15
So even if your CSS is valid,
-
1:18
you might still have issues making your page render
-
1:21
the way you'd like it to in Internet Explorer 6 and 7.
-
1:25
The current version, which is Internet Explorer 8,
-
1:28
has much better support for CSS2.1,
-
1:33
but it's adoption rate amongst users has been very slow.
-
1:37
As of this recording, all versions of Internet Explorer combined
-
1:40
sits somewhere between 60 and 50 percent market share,
-
1:44
depending on where you get your statistics from.
-
1:47
This is the majority share, so for any commercial website,
-
1:51
it's fairly important that it's tested to work properly in Internet Explorer.
-
1:56
Next up is Firefox.
-
1:58
The Firefox web browser is managed by the Mozilla Corporation,
-
2:03
and as of this recording, has roughly 22 percent marketshare.
-
2:07
To render web pages, Firefox uses the open-source Gecko layout engine,
-
2:13
which is also developed by the Mozilla Corporation.
-
2:16
The Gecko layout engine is pretty good,
-
2:18
and features much better standard support than the closed-source
-
2:22
proprietary engine used by Microsoft,
-
2:24
which is called Trident.
-
2:26
By using an open-source rendering engine,
-
2:28
anyone can review Mozilla's code
-
2:30
and submit bug fixes and changes for approval.
-
2:34
By having thousands and thousands of people looking at the code,
-
2:37
it tends to improve more rapidly.
-
2:40
Next is the Chrome web browser,
-
2:42
which is maintained by Google
-
2:45
Chrome is the newest of the major browsers,
-
2:47
only having emerged in late 2008,
-
2:50
but it's currently in third place with about 7 percent market share.
-
2:55
This may not sound like a lot of users,
-
2:57
but for having came out just two years ago,
-
3:01
the market share of Google Chrome is increasing
-
3:03
pretty rapidly every quarter.
-
3:06
Google Chrome has some of the best standards support
-
3:09
of any web browser available right now,
-
3:11
and it is based on the WebKit layout engine.
-
3:14
The WebKit layout engine is an open-source project
-
3:17
that is primarily maintained by Apple,
-
3:20
although many other companies contribute to its development.
-
3:23
The WebKit layout engine is used in many smaller, lesser-known web browsers,
-
3:29
and it is currently one of the dominant layout engines on mobile devices worldwide.
-
3:34
Speaking of Apple, next up is Safari.
-
3:37
The Safari web browser is maintained by Apple,
-
3:41
and it's closed-source with some open-source components.
-
3:45
One of the most important parts, the layout engine,
-
3:48
is open-source, because as you might have guessed,
-
3:51
Apple utilizes the WebKit layout engine.
-
3:54
Much like Google Chrome, Safari has some of the best standard support
-
3:59
currently available, and is sometimes even better than Chrome,
-
4:03
because they constantly are including the latest updates
-
4:06
to the WebKit rendering engine.
-
4:08
Safari has just under 5 percent market share,
-
4:11
but when combined with Chrome,
-
4:12
this amounts to a significant portion of web users
-
4:15
on the WebKit rendering engine.
-
4:18
The last browser we're going to look at is Opera,
-
4:22
which is in fifth place amongst the major desktop browsers.
-
4:26
Opera is developed by Opera software,
-
4:29
and also features excellent standard support.
-
4:32
At roughly 2 percent market share,
-
4:34
they don't have much of the desktop market,
-
4:37
but like WebKit, the Opera browser is featured prominently
-
4:40
on mobile devices worldwide.
-
4:42
With so many browsers, you might be wondering,
-
4:45
"How does one keep up?"
-
4:47
Well, one way to ensure that your website works
-
4:49
across all major browsers is to validate your code.
-
4:53
You can assume that browsers will, for the most part,
-
4:56
conform to the specifications outlined by the W3C.
-
5:00
Be aware, however, that there are many minor discrepancies
-
5:04
that might not always be easy to spot.
-
5:06
For this reason, it's important that you test all your code
-
5:09
directly in all the browsers you're planning to target.
-
5:13
Besides all the different layout engines available,
-
5:15
there's one more important concept to understand
-
5:18
that you'll most commonly encounter inside of web browsers,
-
5:22
and that's how url's work.
-
5:25
Url is an acronym for "uniform resource locator"
-
5:30
and it's the thing that you type into your address bar
-
5:34
that's typically located at the top of your web browser.
-
5:38
In a nutshell, when you type in a url,
-
5:41
it goes through a complex network of special computers called servers
-
5:45
and then the server you're looking for will send back HTML and CSS to your browser.
-
5:52
Your browser, or your computer, is known as a "client,"
-
5:56
and this relationship is called "the client/server relationship."
-
6:01
It's more complex than that, but that's all you need to know for now.
-
6:05
What's more important to understand right now
-
6:08
are the basics of parsing a url.
-
6:10
A url has many parts.
-
6:13
First, is the scheme, or protocol.
-
6:17
In this case, we're using the http protocol,
-
6:19
or "hypertext transfer protocol"
-
6:22
to transmit HTML, CSS, javascript, and other bits across the web.
-
6:27
There are many other schemes and protocols,
-
6:29
one of which we'll be going over in an upcoming video.
-
6:33
Next, is the domain name, such as google.com or w3c.org.
-
6:39
A registered domain name, or IP address,
-
6:42
gives the url a basic destination.
-
6:46
The second part of the domain name is the tld, or "top level domain."
-
6:52
This is the .com, .net, or .org portion of the domain name.
-
6:57
There are many others for different purposes,
-
7:00
and most countries have top-level domains as well.
-
7:04
As an example. .com means "commercial,"
-
7:07
and is intended for commercial use.
-
7:10
.org is for organizations, and so on.
-
7:14
Last is the path.
-
7:16
The path identifies a specific folder or location on the destination IP
-
7:23
and provides the user with the information located there.
-
7:27
There are several other important parts of urls that I haven't gone over here
-
7:32
such as subdomains, query strings, and more,
-
7:35
but those are the basics that you need to know for now.
-
7:38
That about wraps things up for web browsers.
-
7:40
I encourage you to download different web browsers
-
7:43
so that you can test directly and try them out for yourself.
-
7:46
[?mellow guitar music?]
-
7:49
[Think Vitamin Membership - Est. 2010] membership.thinkvitamin.com
You need to sign up for Treehouse in order to download course files.
Sign up