- So it's a very exciting time
because there's a lot of new CSS
that's going to change the way
that we do page layout on the web.
I've made up this official timeline of webpage layout
you can kind of see the evolution
I think we're headed towards
a kitten unicorn era of page layout.
But of course the first thing everybody wants to know
is what are we going to do about the older browsers?
I can't use this new technology because of IE
or because of other kinds of things.
I think we get stuck with this idea
that we're not allowed to use something
until it's fully supported in every browser
because we have this mythology that new code
new CSS, new other kinds of features
they either work or they don't work
and you can either use them or not use them
and those four choices make up this kind of matrix
where I don't have control
as a person making a website or whether or not
the new feature works in my user's browser.
I do have control about whether or not I use it.
And I want to use it when it works
but if it doesn't work then
I can't use it.
If I use it anyway I'm going to get fired
or I'm going to get covered in bugs
and that's not going to work.
So my only choice is to not use it
because it doesn't work and wait until
100% of our users
have this new thing in their browser.
Or what, I don't know, lots of times people
companies will wait until 92%, 97%, 95%
you have this debate about
what percent is acceptable to ignore.
I think we need to support every single solitary person
and every single solitary device.
You want 100% coverage.
But you also don't want to wait
ten years to use a new thing.
I don't think the problem is that
things don't work in certain browsers
I think the problem is that we have this idea
that the whole thing works like this matrix
and it doesn't work like this matrix.
This is more what we actually have.
Which is you can use it and not use it at the same time.
Because it works and it doesn't work at the same time.
We don't just have to live with
not using it until it's 100% covered.
The kitten unicorn lives in this box
the box where we get to use it and not use it
at the same time.
It's quantum CSS, it's magic.
So how come it works this way?
It's because this is the way
that the web was invented from the very very very beginning.
Back when Tim Berners-Lee was at CERN
CERN is a big scientific organisation
where people come from all over the world
and they had different kinds of computers
it was the 80s, who knows what kind of computers
people were using.
Those computers did not really use the same protocols
they didn't really have many ways to talk to each other.
People were using different kinds of software
different sorts of techniques
different kinds of ways of organising their stuff
and Tim Berners-Lee knew that
if he was going to succeed in creating
a system for putting all of these documents in a place where
everyone could access everyone else's information
that he would need to invent a system that would work
no matter what kind of computer people were using
no matter what software people had
no matter how old their machine was
and so he knew that he had to figure that out
he knew that that was going to be a bid deal.
In fact, he said
I would have to create a system with common rules
that would be acceptable to everyone.
This meant as close as possible to no rules at all.
This notion seemed impossible until I realised
that the diversity of different computer systems
and networks could be a rich resource
something to be represented
and not a problem to be eradicated.
This is the very first web browser
it only ran on the NeXT Computer.
Tim Berners-Lee and Robert Cailliau
used the NeXT Computer to invent the web
here it is, but it wasn't going to be any good
if it only worked on NeXT Computers
The second web browser that they made
ran on this IBM computer on the command line
which is crazy, we think of the web
as being all graphics today
but they knew that most of the computers that people had
were these 1980s command line computers
so they wanted the web to work on
as many computers as possible
and they made the line mode browser
you can go play with it today actually at this URL
and see what it was like
click it and it goes to another web page
you click a number to match the link you want to go to
and it goes to another web page.
A totally different way of surfing the web.
Totally worked because you got to the content
that you needed, you got to be able to accomplish
what it was you wanted to accomplish.
And then this is the mosaic browser
sort of the first browser that's
a lot like the browsers that we use today
graphical user interface browser
but the web has always been about
having browsers on different kinds of devices
having browsers that run websites that work anywhere.
It's very different than other kinds of software
that your team or your companies might
be making these days
or the kinds of software we use as a consumer.
If you go to the Google Play store
and you want to download an Android app
it will say right there, requires Android 2.3 and up
or you go to the iOS store and it says
requires iOS eight or later
you might have a Microsoft Word document from 1997
and it doesn't work in the 2017 version of Microsoft Office.
That's kind of the world that we're used to
off the web where the Mac version of the software
only works on Macs, it's not going to work on Windows.
Every piece of software has a minimum requirement
to where it's actually going to work.
And I think lots of times engineers come over
with that kind of idea, that that's how the web works.
That at some point you just say
this website no longer works with these particular browsers.
This only works on Internet Explorer 11 and above
it doesn't work on Internet Explorer 10.
This only works if you have a screen
that's at least 800 pixels wide
it doesn't work on screens that are smaller than that.
This website only works
if you have a certain network connection speed
if you have a slower connection
it's not going to work for you.
Or this website only works if you can see the screen
if for some reason, all the way from you're blind
to you're driving, you can't see the screen
then this website's not going to work, right.
We bring that mentality over from software engineering
but the web is very different.
The web was architected from the very beginning
to work no matter what kind of computer you have
no matter what kind of output device
or screen, or screen reader you might be using.
No matter what kind of input device you might be using
whether you're using a keyboard and a mouse
and a track pad, or maybe you only have one of those
or maybe you have none of those.
Whether you have a fast internet connection
a slow internnet connection a modern computer
or an old computer, no matter which operating system
you're using, no matter what level your browser is at
the web is going to work no matter what.
So as people who make websites
we want to honour that
and we want to make websites in that fashion.
Sometimes people think that means
it's going to be very hard
they have to make two or three different websites
they have to make the mobile website
and the desktop website, they have to make the website
that uses CSS grid and the website
that doesn't have CSS grid.
It's going to be twice as much work.
It really doesn't work that way.
If you use progressive enhancement
you can stack up your code in such a way
that it always works no matter the conditions
it's not twice as hard
it's just how to write good code for the web.
That way the website works no matter
what the screen size is
that way the website works even if you don't have CSS
and you might think who doesn't have CSS?
Well you know what?
Anyone that pushes that little reader mode button
or uses a programme like Insta Paper.
This pocket, you're somehow stripping off all the CSS.
There might be a huge percentage of your users
who are using those reader mode, reading better experiences
and you just don't know it
because Google Analytics doesn't tell you that.
So we want to make sure that we've got good HTML
we've got good CSS, we're using Java Script
for the stuff that Java Script is really good at
and we're not using Java Script for everything.
And so I'm, in the next several videos
I'm going to show you how to write CSS
so that it works no matter what
it works even when you've used new features
and it gets served to browsers
that don't know what those features are.
It's not hard, you just have to know how to do it
and once you do you can write CSS using
all of the brand new stuff, it's not twice as hard
and everyone will get an experience
not the same experience, identically across all devices
and browsers and sizes and stuff
but everyone will get something that works
everybody will be happy
including you.