Viewers: in countries Watching now:
In this hands-on course, James Williamson demonstrates the concepts that form the foundation of Cascading Style Sheets (CSS), including styling text, adding margins and padding, and controlling how images display. The course also explores the tools needed to work with CSS, the differences between embedded and external styles, how to use selectors to target elements, and what to do when styles conflict.
One of the more frustrating aspects of working with CSS is having to deal with varying degrees of support for CSS, as well as rendering inconsistencies from one browser to the next. Now the speed with which browser versions are being updated and the constantly changing nature of the CSS specifications make these issues really unavoidable. Now what they mean for you as a designer is that you'll need to have a strategy for which browsers that you're supporting, as well as how to deal with those browser inconsistencies, and this is a site that you need to become familiar with.
This is the GlobalStats StatCounter, and it's a great site for finding out statistics about web usage-- including browser versions--and operating systems. And I'm just going to scroll down a little bit here and show you what we are looking at. So currently right now I'm looking at the top five browsers from October 2010 to October 2011. And if I want, I can look at it by browser, mobile browser, operating system, mobile operating system. I can look at it by region, so if I want, I can filter that out and just look at it by North America. And I can even customize the time Period if I want.
If I want to look at it for just, say, the last three months, I could do that and it goes ahead and it gives me the settings for just the last three months, so I can see if there is any dramatic changes. So once you understand which browsers that you are designing for, you'll need to know the level of support that those browsers have for the properties that you're going to want to use in your CSS. So how do you find that out? The best way is to simply test them yourself, in the widest range of browsers possible. Ideally, when designing web sites you want to test it in Safari, Chrome, Firefox, Opera, and Internet Explorer at a minimum.
In many cases, you're going to need to test across mobile versions of those browsers as CSS support changes over the course of different browser versions. And web authors can also no longer ignore mobile devices either. Unfortunately, testing on mobile devices is a little bit trickier than desktop testing, but there are some online services out there that can help you see what your site looks like within the mobile space. Putting this as simple as I can, there's no substitute for testing your pages on as many browsers and devices as you possibly can.
The reality of course is that testing across a wide array of devices and browsers isn't always possible. You should work to build as wide a test suite as you can on your own system, but realistically, you'll often going to need to just rely on knowing what does and what doesn't work in various browsers. Now thankfully, there are several sites that can help you get a better understanding of what is and what isn't supported, so let's go and take a look at a couple of those. Now the first site I want to show you is caniuse.com.
This is a great site. Now one of the things this allows me to do is check for various HTML and CSS properties. So if I go to the Show options here-- I'm going to just go ahead and turn off all the categories except for CSS; that'll help us sort of narrow this down a little bit. And now if I scroll through this, you can see all these different properties, like CSS inline-block, the CSS 2.1 selectors, the minimum and maximum width and height, fix position, on, and on, and on. It just goes through a tremendous amount of properties. This site does tend to focus on CSS3 properties, so really the newer properties, but it gives you a nice little table of all the different browsers and which versions of those browsers support it, if they support it, and whether they offer partial support or not.
A lot of times you'll have links to resource pages that talk a little bit more about that property or a little bit more about the browser's support. You can also look at different versions of the browsers as well, so you can see sort of a cascading chart to see at what point support started and whether it was partial support or full support. So this is a really great site. Now another site that you want to focus on is quirksmode.org. This is PPK's site and one of the mainstays of this site is the browser compatibility tables. And if I click on this I get this Compatibility Master Table that allows me to go into things like CSS 2 or CSS3 and really drill down and see what the support is for specific things.
So here you can see all the different browsers, browser versions that PPKE is checking for support from, and it goes through items like all these different selectors, pseudo-class selectors, all these declarations, and it will give you some detailed information about what's supported, what's not, and maybe even why it's not supported or what goes wrong. So this is definitely a site that you want to come back to time and time again. Now another site that I really like--and I'm just going to go ahead and open it up in a new tab because this is a site I really want to show you guys--is if I go to reference.sitepoint.com/css, this takes me to sitepoint's CSS reference page.
I really like this page because they make it very easy to find specific things. So, for example, @import that we were just using in last movie, if I click on that, it gives me more of a description of that particular rule or property. And then I get this nice sort of compatibility table down here that tells me whether it is fully supported or whether there is some bugginess to the implementation, and it will even give me some feedback on what isn't supported or what the problems are with that particular rule or property. So this is a reference that you're probably going to want to spend a good bit of time looking at and exploring.
There is also really no better place to check for support than the browsers themselves. Now Mozilla does just an amazing job of documenting browser support. For example, check out this page on CSS support at the Mozilla Developer Network. If I scroll down through here, you can see every single selector, combinator, pseudo-elements, structural pseudo- classes--and a lot of these things we're going to go over in just a little bit. But properties, you get a full property listing, whether it's supported or not, what version it was supported, and in a little bit we're going to be experimenting with using some of these vendor prefixes and this is really nice, whether or not you need a vendor prefix for a specific element about and for which browser version.
So this is something that you're definitely going to want to bookmark this page as a reference, but the overall Mozilla Developer Network site has tons of fantastic articles about Firefox, web design, and CSS that you're going to want to read through as well. Now the Safari Developer Library is a little bit more technical in nature, and it feels more like a technical reference manual, but this has a wealth of material on it. And I'm looking at the Supported CSS Properties page. Now, what's really nice about this, again, is it goes through every single property, whether it's supported or not, when it was supported, and the syntax for it as well.
So this is really, really nice. Chrome doesn't have a site like this, but since Chrome is a WebKit-based browser, essentially what applies here also applies to Chrome as well. Now I'm a really big fan of Opera's Web specifications support page, so I can find this at opera.com/docs/specs. Now this isn't just for CSS, but obviously that's what we're focusing on. What I like about this is I can look at the different versions of Opera's Presto rendering engine. So I can target a specific Opera version based on that rendering engine and once I do that--let's say I go over here, for example, and go into Presto 2.9 which is the most recent version--I can take a look at support for a lot of different items.
Look, for example, at all the different sections that apply to CSS. We have all the CSS3 modules broken out into separate sections. We have things like CSS Properties. If I click on that, again I get this chart of properties, the values that are applicable for it, description of it, and whether not that property is supported, or whether it has things like partial support to it. So this page is fantastic--again, definitely something you're going to want to bookmark. And finally, Microsoft has a great page for CSS compatibility and Internet Explorer.
Again, this is found on the MSDN Microsoft Network. This page is actually based heavily off of Mozilla's CSS support page, and you're going to get different properties and selectors and in which version of Internet Explorer supports it, so at which point you can start targeting that specific rule for a version of Internet Explorer. Now I'm betting that those are enough resources to at least get you started. Now I know it may seem a little bit overwhelming, but don't despair. I mean, for example, I don't go through and read through every single one of these pages.
A more likely scenario is that you're going to want to use a property you've never used before, so then you sort of check these sites to see what the current level of support, or which versions of the browser support something. Maybe a better way to look at this is that really just reading through the specifications and becoming familiar with browser support levels by going through some of these pages, it's just simply a part of the process of learning CSS and if you look at it that way, it's really just one more thing that you do in order to understand what it is that you're working with.
There are currently no FAQs about CSS: Core Concepts.
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.