The world’s first web browser only worked on one
kind of operating system: NeXTSTEP
(https://worldwideweb.cern.ch)structure, was looking in danger of
being swamped with presentational
instructions. The solution was to split
structure and presentation into two
different languages.
THE PRESENTATION
LAYER
Håkon Wium Lie and Bert Bos joined
forces to work on Cascading Style
Sheets. Using CSS, developers could
add presentational information without
having it intermingled with HTML.
With the arrival of CSS, HTML could
return to doing what it does best:
describing the structure of a document’s
content. The new separation of concerns
had other benefits. A single CSS file could
be responsible for one HTML document
or it could be responsible for multiple
HTML documents: ten, 20, 100 HTML
pages could all reference the same style
sheet. Tweaking the visual style of those
100 different pages no longer involved
changing each and every one. Changing
the single CSS file was enough.
But CSS still needs some way of
understanding which parts of the HTML
it should be styling. It has a kind of
‘mental model’ of how parts of HTML
can be targeted for styling. This model
is represented in the form of selectors.
Using CSS’s selector vocabulary,
developers can target elements with a
particular tag name, class name or ID.
You can think of this way of modelling
a document as being like a document
selector model.
Crucially, CSS adopted the same error-
handing model as HTML. If you use aPROGRESSIVE
ENHANCEMENTThe technique that best matches the
layered nature of the web is progressive
enhancement. This is an approach that
encourages you to think about delivering
your core content with the lowest possible
baseline. This ensures that it’s available to
the widest possible audience. Once you’ve
done that, you are then free to be able to
enhance your offering with more and more
powerful features.
There’s a common misconception that
progressive enhancement means building
for the lowest common denominator.
That’s not quite right. Progressive
enhancement means starting from the
lowest common denominator. Once you’ve
got your baseline in place, there’s no limit
to what you can add on top. In fact, this
approach enables you to use the latest and
greatest APIs – even if they aren’t widely
supported in browsers yet – secure in the
knowledge that your core functionality will
still be available.
Postel’s Law and the principle of
least power are good starting points for
progressive enhancement. Be conservative
in what you send... at first. Choose the
least powerful language suitable for a
given purpose... at first.
To think with a mindset of progressive
enhancement, take a technology-agnostic
approach to what your users need. For
example, if you’re building a restaurant
website, your users are probably going to
need to know the location. The simplest
and least powerful way to provide that is
to provide the address as text. Once you’ve
established that baseline, you are then
free to enhance. You could use a static
map. From there, you can keep enhancing.
Turn the static map into a dynamic ‘slippy’
map. Maybe even add geolocation in order
to show directions.