Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS3 Master Class!
You have completed CSS3 Master Class!
Preview
In this chapter, we'll review some things we can do to further polish and improve the project that we've built. We'll learn a few performance tips and take a look at browser compatibility.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[?music?]
0:00
[Polish]
0:02
[Nick Pettit] We've spent a lot of time improving this layout,
0:05
but there's still a few more things that we could do if we wanted to improve it further.
0:09
So for example, we're using quite a few box shadows here,
0:14
and box shadows are actually pretty harsh on the browser in terms of rendering.
0:18
When the browser has to composite a whole bunch of box shadows on top of one another,
0:24
the frame rates can start to get really low
0:29
and we could get a smoother transition if we just dropped all of the box shadows altogether
0:31
or if we just decreased the blur radius,
0:40
so let's go ahead and switch over to our text editor.
0:43
Right here, we have a few box shadows, and what you would want to do
0:47
is maybe cut down this blur radius from 15 to something like 5,
0:51
and we can save that out and go back and refresh the page.
0:56
We might not see a huge performance improvement;
1:00
the frame rates do look a little bit smoother.
1:04
Of course, that does come at the expense of a much smaller blur radius
1:06
on this shadow, and I don't think that looks quite as good
1:09
and it's not really worth the extra frames,
1:14
so we'll go ahead and just change that back to 15.
1:16
That's really a call that you have to make yourself,
1:19
and as a general rule, just try not to use too many box shadows.
1:21
Another thing that we could do to improve this page
1:26
is we could calculate the width and height of the staging area
1:29
so that any image that we enlarge will be centered on the page.
1:34
Right now, we're just setting its absolute position to 0 and 200,
1:39
but we could do a much better job of dynamically centering them using jQuery,
1:44
so let's go ahead and switch over to the HTML and I'll show you what I mean.
1:50
We'll go ahead and copy and paste a whole bunch of these photos here,
1:54
so we'll just go ahead and copy all 8 of them, actually,
2:00
and we'll paste them in,
2:04
and when we switch over to Google Chrome and refresh,
2:06
you can see that our gallery has a lot more pictures in it, albeit duplicates.
2:09
But when we click on one of these down at the bottom,
2:14
you can see it's going all the way up to the top of the page.
2:17
That's not really very good,
2:21
but like I said, that could pretty easily be fixed with some jQuery.
2:24
So we'll go ahead and remove those and refresh the page,
2:28
and we're back to normal.
2:32
Yet another thing we could do to improve this layout
2:34
is make it work on mobile devices.
2:37
Right now, it looks pretty good on a tablet device or a smaller mobile device,
2:40
but with a little bit of modification, we could use CSS3 media queries
2:45
and responsive web design so that when the width of the page decreases,
2:49
we can adjust the design dynamically so that it better suits the device
2:55
that it's being displayed on.
2:58
And of course, one thing that we have not really fully addressed yet
3:00
is cross-browser support.
3:04
We've tried this out in Chrome, and usually when you try something out in Chrome,
3:06
you can be pretty confident that it's going to look exactly the same in Safari,
3:10
so we don't really need to test that because they are both webkit-based browsers,
3:14
and we also tested this in Firefox and we saw that it looks pretty good there.
3:20
We haven't really done any testing in Opera,
3:24
but Opera is a pretty good browser so we can be confident
3:27
that all these things are going to work
3:30
as long as we add the -o vendor prefix just like we have -moz and -webkit.
3:33
However, the last browser that we haven't really tested in is, of course, Internet Explorer,
3:38
so let's go ahead and switch over to Internet Explorer 8.
3:43
As you can see, it actually still looks pretty good.
3:48
We're losing a couple of things here, like the rounded corners,
3:51
the multi-column layout, and of course, when we click on these images,
3:56
it's not going to have a nice, smooth transition with a rotation.
4:01
However, it still looks pretty good,
4:05
and the interactivity is still intact and that's really the important thing here.
4:10
When you click on a photo, it gets larger
4:14
and you can see the photo at full size
4:17
and you can still read all the text.
4:20
When you're using CSS3 features that are still in draft form,
4:23
it's a good idea to test in other browsers
4:27
to make sure that your site degrades gracefully.
4:29
By now, you should know quite a bit more about CSS3 than when we started.
4:32
Working with an evolving standard can sometimes be challenging,
4:36
but the benefits of using CSS3 are well worth the effort.
4:40
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up