- In figuring out how to make your CSS work
in every browser, no matter whether or not
that browser is new or old,
you're going to consider what happens
when the browser doesn't understand the CSS.
You're going to consider the possibility
of giving the browser some extra CSS
and using overrides to give certain browsers
certain parts of the CSS that you want.
You're also going to consider using feature queries
to explicitly define blocks of code
that get run only under certain conditions.
The other thing you want to think about
and really ask yourself is how well does
this particular feature fail?
There may be some CSS that just doesn't fail very well.
That it's not something like border radius that just turns
into a square or something else.
That the fallback isn't that big of a deal
or you're able to easily write fallbacks.
There may be situations where, really the failure of the CSS
that's not understood just isn't going to work.
In which case, you probably can't use that property.
You need to figure something else out.
Let's look at an example that's a little bit about this,
thinking about, maybe we just don't want to use
this property at all.
Here I've got a simple example.
A photo with a headline to the left
and the headline has been rotated
so that it's turned sideways and reads up the page.
In order for me to accomplish this,
all I need to do is put writing-mode of sideways-lr
on that h1 and we're done.
This sideways-lr writing-mode is defined
in the CSS Writing Modes Level 4 specification.
You think, okay, well,
how well is CSS writing-modes supported?
Let's look at CanIUse.
It actually has pretty great support.
You can look at it, it goes pretty far back.
We'd need to dig into upper mobile and mini, look at IE,
but otherwise it seems to be universally supported.
I happen to know that if I use writing-mode sideways-lr,
or sideways-rl in some kind of code,
it's not going to work in most browsers.
In fact, the only browser it works in is Firefox.
What's going on?
Why is CanIUse telling us that it's supported
when it's actually not supported?
Let's look at the MDN page for writing-modes.
What we can see is that, actually,
what CanIUse is representing is the level three
specification of writing-modes.
Writing-modes level three is very well supported
in lots of browsers.
We can use all of those parts of that tool set
in all these browsers.
Level four is an addition.
It's like the next level of writing-modes
and it simply adds sideways-lr and sideways-rl
and it's what's not supported.
You can see here at the bottom of this page,
we can see in that box, which values are supported.
CanIUse is just telling us
what feature itself has supported, what property.
The writing-modes property's supported,
but that doesn't mean that the sideways value
is being supported.
We can see hear that it's not supported in Chrome, Edge,
Internet Explorer, Opera, Safari.
It is supported in Firefox.
What are we going to do?
We want to use the sideways-lr value,
but it's not supported.
One thing that we could do is just go ahead and use it,
like we talked about before, and let it fail.
The error mode is fine.
The error handling of CSS isn't going to crash anything.
We can just pretend like it's not there,
and maybe it's just going to work out.
Or maybe we want to have two different versions
where we use a vertical-rl for the browsers
that understand writing-modes,
and we use sideways-lr for the browsers
that understand sideways
and we get two different experiences.
The headline's turned in one direction for some browsers,
and the other direction for the other browsers.
But, you know what else we could do?
We could not use sideways
and we could simply use vertical-lr
and then apply transform rotate of 180 degrees,
apply text-align of right,
and a text-orientation of sideways.
You can dig into this example at my website
if you want to look at exactly what each parts of those,
that code does and how those several different properties
interplay together.
The result, however, is the same as if we used sideways-lr,
but we can just avoid using it and use this other set,
these four properties together,
in order to accomplish the same results.
This is an example of like,
maybe the failure just isn't worth it,
and we decide not to use it.
We decide to do something else instead.
Thinking through all of these different possibilities,
understanding what's possible, understanding what CSS is,
how it works, what it wants you to do,
what your options are, thinking about your browser support.
Thinking about all of your users,
using even the oldest browsers,
using browsers you haven't even heard of,
using devices you haven't heard of like a game console.
If you think about your CSS for just a little bit
and craft it carefully,
you can make sure that all of your users are supported
even though you're using the brand-new properties
that only a very few set of browsers have.