Start learning with our library of video tutorials taught by experts. Get started
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.
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 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.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.