New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

CSS Fundamentals
Illustration by

Checking browser support


From:

CSS Fundamentals

with James Williamson

Video: Checking browser support

As I mentioned earlier, knowing what's in the specification is only half of the process of understanding CSS. You see, browsers haven't implemented everything in the specifications, and some of the things that are implemented aren't implemented consistently. Remember, CSS is a constantly evolving language, and the price of that flexibility means that as an author you have a responsibility to understand what works seamlessly across browsers, what you'll need to tweak, and what you'll need to keep an eye on for future support.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
CSS Fundamentals
3h 14m Beginner Sep 26, 2011 Updated Dec 13, 2011

Viewers: in countries Watching now:

This course contains a high-level overview of Cascading Style Sheets, while exploring the basic concepts, terminology, and tools of the language. Beginning with an exploration of CSS syntax, author James Williamson explains how CSS modifies text, borders, backgrounds, and color; demonstrates CSS and HTML integration; and contextualizes the current state of CSS. The course also tours some of the most popular CSS editors and frameworks and lists online tools and resources for further study. This course is for people who want a big-picture overview before taking hands-on courses.

Topics include:
  • Understanding basic selector types
  • Integrating CSS with HTML
  • Examining browser rendering differences
  • Exploring CSS specifications
  • Checking browser support
  • Understanding the box model
  • Adjusting margins and padding
  • Positioning elements
  • Exploring basic layout concepts
  • Understanding media queries
  • Introducing CSS3
  • Using CSS Reset
Subjects:
Web Web Foundations
Software:
CSS
Author:
James Williamson

Checking browser support

As I mentioned earlier, knowing what's in the specification is only half of the process of understanding CSS. You see, browsers haven't implemented everything in the specifications, and some of the things that are implemented aren't implemented consistently. Remember, CSS is a constantly evolving language, and the price of that flexibility means that as an author you have a responsibility to understand what works seamlessly across browsers, what you'll need to tweak, and what you'll need to keep an eye on for future support.

So, how do you track browser support? Well, one way is simply test them yourself. Ideally, when designing web sites, you'll want to test in Safari, Chrome, Firefox, Opera, and Internet Explorer. Of course, in many cases, you'll need to test across multiple versions of those browsers as CSS support changes over the course of browser versions. Web authors can no longer ignore mobile devices either. Unfortunately, testing on mobile devices is considerably trickier than desktop testing, but there are online services that can help you see what your site looks like in a mobile space.

Simply put, there is no substitute for testing your pages on as many browsers and devices as you can. The reality of course is that testing across a wide array of devices and browsers isn't always really feasible. You should work to build as wide a test suite as you can within your environment, but realistically, you're often going to need to rely on knowing what does work and what doesn't work in various browsers and various platforms. Now thankfully, there are a lot of online sites that can help you get a better understanding of what is and what isn't supported in various browsers, so let's go take a look at a couple of them.

Now I want to start with caniuse.com. This is a great site for checking browser compatibility, especially as it lists not only desktop browsers, as we can see here, but also mobile browsers as well, which is really nice. Now, you can filter by different categories. So you can see right now, I'm just looking at CSS properties, but you can also look at HTML5, the JavaScript API, SVG. So there are a lot of things here that we can see what their support level is in current browsers, which is very nice. Now you're also going to see that a lot of these properties have links to external reference articles or examples as well, which is really nice.

Now as you scroll through this, you're going to notice that the site is focusing more on CSS3 properties and some of the recent additions to CSS, but it's still a great reference and resource for you to start with, especially for some of the newer properties of CSS. Now another fantastic resource is Peter-Paul Koch's, or PPK as he is better known, his site quirksmode.org. This has by far the most comprehensive list of browser compatibility charts online. Now, the Compatibility Master Table which I'm showing you right now gives you a series of compatibility tests that you can then explore in more detail.

For example, from here I can take a look at the CSS2 or CSS3 compatibility table. So I'm just going to click over on CSS2 to show you this in a little bit more detail. From there, if I scroll down, notice that he has a ton of browsers that he tests against, IE 5.5 all the way though IE 9. It goes in Opera, Konqueror, although Konqueror, I don't think he has had a lot of testing going on there. But Firefox, Safari, Chrome. Some of the versions you're going to see here are a little behind of times. He doesn't keep this as updated as he used to, because he's got so much other stuff going on, but this is still a great place to start.

So you'll notice, as I scroll through here, there's so many different properties, selectors, and declarations that he tests for. There's a lot going on here, and there's a lot of information that you can pull from this site. Now another great source of information is, as always, Wikipedia. And these guys have an awesome comparison of CSS support for different browser-rendering engines. So you wanted to look at the comparison of layout engines, Cascading Style Sheets page. You can just go to Wikipedia and search for that, and it will take you right to this. Now the trick here--I'm going to scroll down a little bit-- the trick here is to realize that you're looking at rendering engines.

Remember, we talked about rendering engines a little earlier and not actual browser versions. So you might have to do a little bit of digging to figure out things like which version of Chrome is driven by which version on the WebKit rendering engine. But once you have that, this list is amazingly thorough. I'm just going to do a real sort of brief scan through this, just so you can see how much information regarding CSS is covered here. It is incredible! The other really nice thing about this is that it includes nightly build support as well and experimental support, as you can see here.

So there's a lot of information here that you can glean through, a lot of links and references that you can click on to go get a little bit more information about this. So when you're really digging in the details of it, and you don't mind sort of researching which version of rendering engine is driving which browser, this is a really good table to take a look at. Somewhat older, but I also really recommend checking out positioniseverything.net. If you've ever watched some of my older CSS titles, you'll know that I love this site. I went to it to almost all the time in some of my older CSS titles. So this site does consist of primarily older information, but it is absolutely still the go-to guide on browser bugs and ways around those browser bugs.

And its primary focus, as you would imagine, is on Internet Explorer and some of those older versions of it. IE 6 isn't dead yet as of this recording; IE 7 is still being used a good bit; IE 8 is still being used a good bit; so you're still going to need to know how to solve some of those browser errors and those browser bugs. And if you're brand new to CSS, reading through these past articles is really going to give you a nice solid foundation into browser and standards development over time. So it'll give you good ideas to sort of how browsers have evolved over time and the level of standards support that they have.

Finally, there is no better place to check for support than the actual browsers themselves. Now Mozilla, I can't say enough about their documents. They do such an awesome job of documenting not only browser support, but all sorts of things going on with their browsers. Check out their page on CSS support at the Mozilla Developer Network. So you can just go to the developer.mozilla.org and search for CSS Support. Now as I scroll through this, however, you can see how comprehensive this is. It starts with selectors, and it's just going to go right on down.

It's going to tell you whether it's supported, which version it's supported in, and what specification--with a link to that specification, I might add--to help you out as well. And you can see from the length of this table the amount of information that's covered here. I think this is a great cheat sheet to come to and just find all the different CSS properties, values, and selectors in one great huge list. And the other really nice thing about this is if there is a bug in Mozilla's current implementation of that, it'll take you right to the bug tracker, so you can go to read about the bug, who filed it, what the errors are, and maybe see what the current status of that bug is as well.

So this is a great resource for you. The Safari Developer Library also has a similar resource involving CSS support. And if I go to developer.apple.com and look though the Safari documentation, what you're looking for is the CSS reference. So that's what you want to search for. But here we are at the Introduction page, and we can see that we have an Explanation of Terms, which is we can go through the terminology. Supported CSS Properties, I'm just going to click on that. And it's going to go through those in detail, maybe not in a table format, the way Mozilla does it, but in a really nice sort of readable format.

So this is a great resource too. It also contains links to related content, which is really going to help you sort of understand Safari's and WebKit's capabilities overall. Now Chrome doesn't have a detailed CSS resource page, at least not one that I could find, like Mozilla or Safari, but I do recommend reading The Chromium Blog. It's a great way to keep up with what's going on with Chrome. Any changes to implementations are going to be written about here, and it's also giving to keep you informed on support issues, so this is a great blog to kind of read. Now for the most part, since Chrome is a WebKit-based browser, the reference information that I was just showing you on Safari's site will also apply to Chrome.

Now just like Mozilla, I'm absolutely in love with Opera's documentation. So if I go to opera.com/docs/specs, I'm going to see all of the rendering engines, the past versions of the Opera's Presto rendering engine here, and their support for web specifications, which is really cool. So if I go to the latest one, Opera Presto, say 2.9, and click on that, notice that I get a full list of properties here that are supported and what level of support. So if I just go to say CSS Properties, I see I get a really detailed table here of all the different properties, the accepted values for it, a nice description of it-- this is a nice teaching tool as well--and then whether that is supported within Opera.

And if you scroll down though here, you can see, they will really tell you when they've got partial support, when something is fully supported, or whether something is not supported, although they don't have anything here within the properties that currently is not supported. Now not to be left out, Microsoft has a really detailed CSS reference as well for Internet Explorer. This is a little harder to find. You're going to want to msdn.microsoft.com and go into the Library section and search for CSS Compatibility. Now it's worth the search though, because what you're going to get here is an extremely detailed table that's a lot like the Mozilla's table.

And it's going to give you all the way from Internet Explorer 5 through Internet Explorer 9. And I would imagine in the very near future you're going to Internet Explorer 10 up there as well. It's going to show you what's supported, whether it has partial support, full support. This is a great place to go learn about what Internet Explorer supports and what it doesn't support, so I recommend definitely reading through this as well. Okay. Now, hopefully those are enough resources to get you started. I would imagine you can at least get started with those, right? I realize that probably after watching through all these CSS specification movies and support movies in this chapter, you might be a little overwhelmed. My advice: don't be.

You don't have to know all of this at once to start writing and using CSS. The good news is that most modern browsers fully support CSS 2.1, so you can usually write valid CSS based on the 2.1 specification, and be reasonably confident that your designs are going to function well across browsers. However, don't let that particular comfort level keep you from learning these details. Simply make reading through the specifications and becoming familiar with browser support levels are part of the process of you learning CSS.

You'll find that you grasp concepts a little quicker, write more efficient CSS, and create designs that work more consistently across browsers and platforms.

Find answers to the most frequently asked questions about CSS Fundamentals.


Expand all | Collapse all
please wait ...
Q: This course was updated on 12/13/2011. Can you tell me what has changed?
A: One movie called "Who is this course for?" was added to provide information on what you can expect to get from the course, depending on your level of familiarity with CSS.
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.