Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Checking browser support

From: CSS Fundamentals

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.

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.

Show transcript

This video is part of

Image for CSS Fundamentals
CSS Fundamentals

36 video lessons · 71493 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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.


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.

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 preferences from 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

Your file was successfully uploaded.

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.