- [Voiceover] As I mentioned earlier,
knowing what is in the specifications
is really only half of the process of
understanding CSS.
You see, browsers haven't implemented
everything in the specs, 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 to simply test them yourself.
Ideally, when designing websites you'll want to
test in Safari, Chrome, Firefox, Opera,
older versions of Internet Explorer,
and Microsoft Edge.
You'll also wanna test on as many mobile
devices as you 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, but realistically,
you'll often need to rely on knowing
what does and what doesn't work in
various browsers.
Thankfully, there are several sites that
can help you get a better understanding of
what is and what isn't supported in
various browsers.
Caniuse.com is a great site for checking
browser compatibility, as it lists
not only desktop browsers, but mobile
browsers as well.
You can filter by categories, as you can
see here we have HTML5, CSS,
SVG, Javascript, and so on.
Or you can search by a specific property
or specification.
Let's say, for example, that I was
interested to see what the current
state of Flexbox support was.
Well, I've got a nice little search box
right here, and I can type in can I use Flexbox?
I don't even have to type the whole
thing in, and it jumps right to it.
Now, what's really nice about this,
if I scroll down a little bit,
you'll notice it gives me some statistics on
support in the United States, as well as global.
It's also showing me support across
a wide array of browsers, I've got
Internet Explorer, Edge, Firefox,
Chrome, Safari, Opera, and then,
for mobile, it goes to iOS Safari,
Opera Mini, Android Browser,
and Chrome for Android.
I get to see which versions are supported,
and whether there are any issues with
that particular type of support.
Down towards the bottom of the table,
you'll also see some notes.
A few known issues with Flexbox.
Various resources, and user feedback
if any exists.
I also should point out that caniuse.com
frequently updates their site's functionality
and interface design, so don't be surprised if
what you see when you visit the site
doesn't match what I'm showing you exactly.
Regardless of how the interface may change,
this site is gonna remain one of
the best resources for checking on
CSS browser support.
Another long standing resource is
Peter Paul Koch's, or PPK as he's
better known, site quirksmode.org.
This is one of the most comprehensive
lists of browser compatibility charts
that you could find anywhere.
So if you go to quirksmode.org/compatibility.html,
you'll see a suite of current tests.
If I click on CSS, you'll notice that
I can get charts on selectors, older versions
of CSS, backgrounds and borders,
cascading and inheritance,
so forth and so on, if I look at
selectors, for example, it's gonna
have a list of all different CSS selectors
and whether or not they're supported in
specific browsers.
Now you might notice that this is limited to IE,
Firefox, Safari, Opera, and Chrome,
but within that suite, and there's
a very comprehensive list of support.
Now, some of these tables are a little old.
However, they remain a great resource
for checking support, especially for
older browsers.
Wikipedia also has an awesome comparison of
CSS support for various browser rendering engines.
You can find this by simply going to Wikipedia
and searching for comparison of layout
engines for cascading style sheets.
Now the trick here is to realize that
when I scroll down into the tables
that they provide you, that this list is
comparing layout engines, not the
individual browsers themselves,
so you might need to do a little
digging to figure out things like
which version of a browser you're looking for.
So for example it has WebKit and Edge,
but you'll notice it doesn't have Blink.
However, the list is very thorough,
and even includes nightly build support
and experimental support.
Because of its comprehensive nature,
it can sometimes be a little difficult to
find exactly what you're looking for,
but a little digging can be extremely rewarding.
Finally, there's no better place to check for
support than the browsers themselves.
Mozilla does an awesome job of documenting
browser support, so be sure to
check out their page on CSS support
at the Mozilla Developer Network.
So if you go to developer.mozilla.org and
search for CSS support chart, you'll find this page.
What's nice about this is the support chart is
fairly well organized.
If you'll notice on the right hand side,
I've got links for support for selectors,
different properties, the @ rules,
media queries, and values and units.
So you should be able to quickly skim
through this and find out whether or
not a specific property or selector or rule is
supported within Firefox.
And not only should you keep this page
as a reference, but you should explore
the developer network as well,
as it has tons of fantastic articles about
Firefox, and web design and
development in general.
The Safari developer library has a section
on CSS support, as well as a CSS reference.
To find this, just go to developer.apple.com
and search for Safari CSS reference.
Much like the Mozilla reference, over here on
the left hand side, I have links to supported
CSS properties, which are then broken
down by things like the box model,
visual formatting model, and things like that.
You scroll through it, it doesn't really
necessarily list which browser it's
supported in, just whether or not
that particular property is supported.
I also wanna point out that Safari is
a WebKit-based browser, so looking
through the supported CSS properties
here will give you a good idea as to
what other WebKit-based browsers
might support as well.
Although Chrome doesn't have a detailed
CSS resource page like Mozilla or Safari,
I do recommend reading the Chromium blog,
which you can find at blog.chromium.org.
It's a great way to keep up with what's
going on with Chrome, and to keep
informed of support issues.
And for the most part, since Chrome's
engine is related to WebKit, the reference
information on the Safari site will
often apply to Chrome as well.
Microsoft also features a great resource
for their new Edge browsers and older
versions of Internet Explorer.
If you go to dev.windows.com and
search for Edge CSS style support,
you should find this page.
In the documentation section of Edge,
it's gonna list every single CSS style
that's supported by Microsoft Edge.
Now, unfortunately, that's pretty much
the only information that you get,
but it's nice to be able to quickly
check what's supported and what's not.
I do wanna point out though, that this
Microsoft Edge development site does
have some really cool tools.
If I click on the Tools section, they have
virtual machines that you can download
and install, which allow you to test on
older versions of Internet Explorer,
as well as Microsoft Edge, even if
you're on an Apple computer.
It allows you to test remotely,
scan your site, and get browser screenshots
from older versions of Internet Explorer as well.
So these tools are definitely worth
checking out when you're wanting to
test on either Internet Explorer or
Microsoft Edge.
Okay, so hopefully those are enough
resources to get you started.
I realize that after watching through
the CSS specification movies and the
support movie that you might be
a little overwhelmed.
Don't be.
You don't have to know all of this at
once to start writing and using CSS.
Simply make rooting through the
specifications and becoming familiar
with browser support a part of the
process as you learn CSS.
You'll find that you grasp concepts quicker
write more efficient CSS, and create
designs that work more consistently
across browsers and platforms.