Progressively Enhanced CSS
Progressive Enhancement is a cornerstone of web development but when people talk about it they are normally talking about JavaScript, if CSS is included then it's normally in reference to cosmetic enhancements. Here's how I extend this principle deeper into CSS and layer enhancements on a larger scale, taking advantage of the C in CSS.
Baseline presentation
Start with a baseline presentation as the main body of your CSS file (i.e. no media queries). This should include resets, colours, typography and core elements of the site. At this stage the layout should be minimal and strictly linear - however tempted you might be, do not include floats or positioning at this stage. This is the layout that older browsers that do not support media queries will receive, this is sometimes referred to by the maxim: "The absence of media queries is the first media query."
Narrow Screen
This is where we have our first media query and is used to enhance the presentation for browsers that support media queries. We use a media query of @media only all to target these browsers.
As we now know the browser has a reasonably modern CSS engine and can be relied on to handle most layout instructions corrects we can now start using floats and positioning to move away from the strictly linear baseline presentation. This is what you would typically think of as your first mobile layout for smartphones.
Layered Media Queries
I'm not going to say too much about this as it is one of the cornerstones of responsive design - use the code within the media queries to build out your layouts to adapt to screen size or other signal. Pay particular attention to how declarations override each other and pay attention to the 'reset' value of CSS properties as they differ.
Feature specific
Whilst this isn't a 'pure' css technique as it relies on JavaScript it is still rooted firmly in CSS. Using JavaScript to add classes to the <html> element that signifiy support for browser features that then let you override earlier CSS declarations to better support that feature.
The first feature to detect using JavaScript is JavaScript itself; adding a class of .js alows you to restyle any UI elements that will change appearance when the JavaScript UI loads (e.g. carousels, expandable sections, etc.) and also allows them to be masked before the UI is fully loaded, also known as FOUC. For more detail see my article on coping without JavaScript.
Another key feature to detect is support for a touch screen interface. Whilst - in my experience - not all touch screens correctly identify themselves, the most common devices will do so. There are two key areas that you should be using touch support to modify the UI:
- Touch targets
Items that are the target of touch interactions - such as buttons and links - can be given increased padding and margins to make interactions with them easier. Small targets are fine with a mouse but the pad of a finger can cover a large area of a small screen so large and well spaced touch targets make interaction less error prone.
- Hover states
Touch interfaces don't support a hover state in the way a mouse pointer does, especially for items that also have a click interaction where touching the item will trigger the click state without previously triggering the hover state. Many sites, and especially navigation menus, rely on the hover state to reveal further information and, in some particularly bad cases, the inaccessible hover state is the only way to access an item.
I have expanded on this topic in my post on building a layered UI.
Bringing it all together
We start with a baseline, linear, layout that is suitable for less capable browsers such as older mobiles and legacy versions of Internet Explorer.
Then, in an only media query, we enhance the baseline layout with a more complex layout suitable for narrow screens.
Using further media queries we then build out the layout with breakpoints as we would do for any responsive design.
Finally we add in specific style enhancements based on feature detection.