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.