The Cisco Digital Readiness Index was developed to holistically measure a countryâ€^TMs level of digital readiness.
More RSS Feed for Cisco: newsroom.cisco.com/rss-feeds ...

Cisco recently released a report measuring the digital readiness of how well-positioned a country is to benefit from the digital economy.
More RSS Feed for Cisco: newsroom.cisco.com/rss-feeds ...

the Harambe Entrepreneur Alliance—is hastening the development of Africa by promoting smaller and more daring actions.
More RSS Feed for Cisco: newsroom.cisco.com/rss-feeds ...

Decision will lead to unemployment, says Thirumavalavan

“COVID-19 is a respiratory disease but world over we see children coming with diarrhoea and abdominal pain,” says a doctor

If workers or their home States cannot pay, T.N. will cover the cost under SDRF

The Madras High Court on Friday granted time till Monday for the State government to file a comprehensive report on steps taken to conduct mass testin

The second Shramik special train with 1,131 passengers left Kadpadi junction for Ranchi on Friday at 7.40 p.m. The passengers were brought to the stat

Alan Dalton uses this, the International Day of Persons with Disabilities, to look back at where we’ve come from, to evaluate where we are, and to look forward to what’s coming next in the future of accessibility guidelines.

Happy United Nations International Day of Persons with Disabilities! The United Nations have chosen “Promoting the participation of persons with disabilities and their leadership: taking action on the 2030 Development Agenda” for this year’s observance. Let’s see how the World Wide Web Consortium (W3C)’s Web Accessibility Initiative (WAI) guidelines of accessibility past, present, and yet-to-come can help us to follow that goal, and make sure that the websites—and everything else!—that we create can include as many potential users as possible.

Guidelines of Accessibility Past

The W3C published the Web Content Accessibility Guidelines (WCAG) 1.0 on 5th May 1999, when most of us were playing Snake on our Nokia 3210s’ 1.5” monochrome screens…a very long time ago in technology terms. From the start, those guidelines proved enlightening for designers and developers who wanted to avoid excluding users from their websites. For example, we learned how to provide alternatives to audio and images, how to structure information, and how to help users to find the information they needed. However, those guidelines were specific to the web technologies of the time, resulting in limitations such as requiring developers to “use W3C technologies when they are available […]”. Also, those guidelines became outdated; I doubt that you, gentle reader, consult their technical documentation about “directly accessible applets” or “Writing for browsers that do not support FRAME” in your day-to-day work.

Guidelines of Accessibility Present

The W3C published the Web Content Accessibility Guidelines (WCAG) 2.0 on 11th December 2008, when most of us were admiring the iPhone 3G’s innovative “iPhone OS 2.0” software…a long time ago in technology terms. Unlike WCAG 1, these guidelines also applied to non-W3C technologies, such as PDF and Flash. These guidelines used legalese and future-proofed language, with terms such as “time-based media” and “programmatically determined”, and testable success criteria. This made these guidelines more difficult for designers and developers to grasp, but also enabled the guidelines to make their way into international standards (see EN 301 549 — Accessibility requirements suitable for public procurement of ICT products and services in Europe and ISO/IEC 40500:2012 Information technology — W3C Web Content Accessibility Guidelines (WCAG) 2.0) and even international law (see EU Directive 2016/2102 … on the accessibility of the websites and mobile applications of public sector bodies).

More importantly, these guidelines enabled designers and developers to create inclusive websites, at scale. For example, in the past 18 months:

• Intercom made their web Messenger accessible, achieving Level-AA conformance;
• Vimeo made accessibility updates to their video player to achieve Level-AA conformance;
• Stripe designed a new accessible colour system to conform with success criterion 1.4.3 (“Contrast (Minimum)”).

The updated Web Content Accessibility Guidelines (WCAG) 2.1 arrived on 5th June last year—almost a 10-year wait for a “.1” update!—and added 17 new success criteria to help bring the guidelines up to date. Those new criteria focused on people using mobile devices and touchscreens, people with low vision, and people with cognitive and learning disabilities.

(If you need to get up to speed with these guidelines, take 36 minutes to read “Web Content Accessibility Guidelines—for People Who Haven’t Read Them” and Web Content Accessibility Guidelines 2.1—for People Who Haven’t Read the Update.)

Guidelines of Accessibility Yet to Come

So, what’s next? Well, the W3C hope to release another minor update (WCAG 2.2) in November 2020. However, they also have a Task Force working on produce major new guidelines with wider scope (more people, more technologies) and fewer limitations (easier to understand, easier to use) in November 2022. These next guidelines will have a different name, because they will cover more than “Web” and “Content”. Andrew Kirkpatrick (Adobe’s Head of Accessibility) named the Task Force “Silver” (because the initials of “Accessibility Guidelines” form the symbol of the silver element).

The Silver Task Force want the next major accessibility guidelines to:

• take account of more disabilities;
• apply to more technologies than just the web, including virtual reality, augmented reality, voice assistants, and more;
• consider all the technologies that people use, including authoring tools, browsers, media players, assistive technologies (including screen readers and screen magnifiers), application software, and operating systems.

That’s quite a challenge, and so the more people who can help, the better. The Silver Task Force wanted an alternative to W3C’s Working Groups, which are made up of employees of organisations who are members of the W3C, and invited experts. So, they created a Silver Community Group to allow everyone to contribute towards this crucial work. If you want to join right now, for free, just create a W3C account.

Like all good designers, the Silver Task Force and Silver Community Group began by researching. They examined the problems that people have had when using, conforming to, and maintaining the existing accessibility guidelines, and then summarised that research. From there, the Silver Community Group drafted ambitious design principles and requirements. You can read about what the Silver Community Group are currently working on, and decide whether you would like to get involved now, or at a later stage.

Emphasise expertise over empathy

Remember that today’s theme is “Promoting the participation of persons with disabilities and their leadership: taking action on the 2030 Development Agenda”. (The United Nations’ 2030 Development Agenda is outside the scope of this article, but if you’re looking to be inspired, read Alessia Aquaro’s article on Public Digital’s blog about how digital government can contribute to the UN’s Sustainable Development Goals.) In line with this theme, if you don’t have a disability and you want to contribute to the Silver Community Group, resist the temptation to try to empathise with people with disabilities. Instead, take 21 minutes during this festive season to enjoy the brilliant Liz Jackson explaining how empathy reifies disability stigmas, and follow her advice.

Choose the right route

I think we can expect the next Accessibility Guidelines to make their way into international standards and international law, just like their predecessors. We can also expect successful companies to apply them at scale. If you contribute to developing those guidelines, you can help to make sure that as many people as possible will be able to access digital information and services, in an era when that access will be crucial to every aspect of people’s lives. As Cennydd Bowles explained in “Building Better Worlds”, “There is no such thing as the future. There are instead a near-infinity of potential futures. The road as-yet-untravelled stretches before us in abundant directions. We get to choose the route. There is no fate but what we make.”

About the author

Alan Dalton worked for Ireland’s National Disability Authority for 9½ years, mostly as Accessibility Development Advisor. That involved working closely with public sector bodies to make websites, services, and information more accessible to all users, including users with disabilities. Before that, he was a consultant and trainer for Software Paths Ltd. in Dublin. In his spare time, he maintains StrongPasswordGenerator.com to help people stay safe online, tweets, and takes photos.

More articles by Alan

Michelle Barker appears as one of a heavenly host, coming forth with scroll in hand to pronounce an end to janky scrolljacking! Unto us a new specification is born, in the city of TimBL, and its name shall be called Scroll Snap.

Sponsor: Order any Standard paperback(s) and get a surprise gift card in the box for YOU. While supplies last, from your pals at A Book Apart!

One area where the web has traditionally lagged behind native platforms is the perceived “slickness” of the app experience. In part, this perception comes from the way the UI responds to user interactions – including the act of scrolling through content.

Faced with the limitations of the web platform, developers frequently reach for JavaScript libraries and frameworks to alter the experience of scrolling a web page – sometimes called “scroll-jacking” – not always a good thing if implemented without due consideration of the user experience. More libraries can also lead to page bloat, and drag down a site’s performance. But with the relatively new CSS Scroll Snap specification, we have the ability to control the scrolling behaviour of a web page (to a degree) using web standards – without resorting to heavy libraries. Let’s take a look at how.

Scroll Snap

A user can control the scroll position of a web page in a number of ways, such as using a mouse, touch gesture or arrow keys. In contrast to a linear scrolling experience, where the rate of scroll reflects the rate of the controller, the Scroll Snap specification enables a web page to snap to specific points as the user scrolls. For this, we need a fixed-height element to act as the scroll container, and the direct children of that element will determine the snap points. To demonstrate this, here is some example HTML, which consists of a <div> containing four <section> elements:

<div class="scroll-container">
  <section>
    <h2>Section 1</h2>
  </section>
  <section>
    <h2>Section 2</h2>
  </section>
  <section>
    <h2>Section 3</h2>
  </section>
  <section>
    <h2>Section 4</h2>
  </section>
</div>

Scroll snapping requires the presence of two main CSS properties: scroll-snap-type and scroll-snap-align. scroll-snap-type applies to the scroll container element, and takes two keyword values. It tells the browser:

• The direction to snap
• Whether snapping is mandatory

scroll-snap-align is applied to the child elements – in this case our <section>s.

We also need to set a fixed height on the scroll container, and set the relevant overflow property to scroll.

.scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

section {
  height: 100vh;
  scroll-snap-align: center;
}

In the above example, I’m setting the direction in the scroll-snap-type property to y to specify vertical snapping. The second value specifies that snapping is mandatory. This means that when the user stops scrolling their scroll position will always snap to the nearest snap point. The alternative value is proximity, which determines that the user’s scroll position will be snapped only if they stop scrolling in the proximity of a snap point. (It’s down to the browser to determine what it considers to be the proximity threshold.)

If you have content of indeterminate length, which might feasibly be larger than the height of the scroll container (in this case 100vh), then using a value of mandatory can cause some content to be hidden above or below the visible area, so is not recommended. But if you know that your content will always fit within the viewport, then mandatory can produce a more consistent user experience.

In this example I’m setting both the scroll container and each of the sections to a height of 100vh, which affects the scroll experience of the entire web page. But scroll snapping can also be implemented on smaller components too. Setting scroll snapping on the x-axis (or inline axis) can produce something like a carousel effect.

In this demo, you can scroll horizontally scroll through the sections:

The Intersection Observer API

By implementing the CSS above, our web page already has a more native-like feel to it. To improve upon this further we could add some scroll-based transitions and animations. We’ll need to employ a bit of Javascript for this, using the Intersection Observer API. This allows us to create an observer that watches for elements intersecting with the viewport, triggering a callback function when this occurs. It is more efficient than libraries that rely on continuously listening for scroll events.

We can create an observer that watches for each of our scroll sections coming in and out of view:

const sections = [...document.querySelectorAll('section')]

const options = {
  rootMargin: '0px',
  threshold: 0.25
}

const callback = (entries) => {
  entries.forEach((entry) => {
    if (entry.intersectionRatio >= 0.25) {
      target.classList.add("is-visible");
    } else {
      target.classList.remove("is-visible");
    }
  })
}

const observer = new IntersectionObserver(callback, options)

sections.forEach((section, index) => {
  observer.observe(section)
})

In this example, a callback function is triggered whenever one of our sections intersects the container by 25% (using the threshold option). The callback adds a class of is-visible to the section if it is at least 25% in view when the intersection occurs (which will take effect when the element is coming into view), and removes it otherwise (when the element is moving out of view). Then we can add some CSS to transition in the content for each of those sections:

section .content {
  opacity: 0:
}

section.is-visible .content {
  opacity: 1;
  transition: opacity 1000ms:
}

This demo shows it in action:

You could, of course, implement some much more fancy transition and animation effects in CSS or JS!

As an aside, it’s worth pointing out that, in practice, we shouldn’t be setting opacity: 0 as the default without considering the experience if JavaScript fails to load. In this case, the user would see no content at all! There are different ways to handle this: We could add a .no-js class to the body (which we remove on load with JS), and set default styles on it, or we could set the initial style (before transition) with JS instead of CSS.

Position: sticky

There’s one more CSS property that I think has the potential to aid the scroll experience, and that’s the position property. Unlike position: fixed, which locks the position of an element relative to the nearest relative ancestor and doesn’t change, position: sticky is more like a temporary lock. An element with a position value of sticky will become fixed only until it reaches the threshold of its parent, at which point it resumes relative positioning.

By “sticking” some elements within scroll sections we can give the impression of them being tied to the action of scrolling between sections. It’s pretty cool that we can instruct an element to respond to it’s position within a container with CSS alone!

Browser support and fallbacks

The scroll-snap-type and scroll-snap-align properties are fairly well-supported. The former requires a prefix for Edge and IE, and older versions of Safari do not support axis values. In newer versions of Safari it works quite well. Intersection Observer similarly has a good level of support, with the exception of IE.

By wrapping our scroll-related code in a feature query we can provide a regular scrolling experience as a fallback for users of older browsers, where accessing the content is most important. Browsers that do not support scroll-snap-type with an axis value would simply scroll as normal.

@supports (scroll-snap-type: y mandatory) {
  .scroll-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
  }

  section {
    height: 100vh;
    scroll-snap-align: center;
  }
}

The above code would exclude MS Edge and IE, as they don’t support axis values. If you wanted to support them you could do so using a vendor prefix, and using @supports (scroll-snap-type: mandatory) instead.

Putting it all together

This demo combines all three of the effects discussed in this article.

Summary

Spending time on scroll-based styling might seem silly or frivolous to some. But I believe it’s an important part of positioning the web as a viable alternative to native applications, keeping it open and accessible. While these new CSS features don’t offer all of the control we might expect with a fully featured JS library, they have a major advantage: simplicity and reliability. By utilising web standards where possible, we can have the best of both worlds: Slick and eye-catching sites that satisfy clients’ expectations, with the added benefit of better performance for users.

About the author

Michelle is a Lead Front End Developer at Bristol web agency Atomic Smash, author of front-end blog CSS { In Real Life }, and a Mozilla Tech Speaker. She has written articles for CSS Tricks, Smashing Magazine, and Web Designer Magazine, to name a few. She enjoys experimenting with new CSS features and helping others learn about them.

More articles by Michelle

Andy Bell rings out a fresh call in support of the timeless concept of progressive enhancement. What does it mean to build a modern JavaScript-focussed web experience that still works well if part of the stack isn’t supported or fails? Andy shows us how that might be done.

Those that know me well know that I make a lot of side projects. I most definitely make too many, but there’s one really useful thing about making lots of side projects: it allows me to experiment in a low-risk setting.

Side projects also allow me to accidentally create a context where I can demonstrate a really affective, long-running methodology for building on the web: progressive enhancement. That context is a little Progressive Web App that I’m tinkering with called Jotter. It’s incredibly simple, but under the hood, there’s a really solid experience built on top of a minimum viable experience which after reading this article, you’ll hopefully apply this methodology to your own work.

What is a minimum viable experience?

The key to progressive enhancement is distilling the user experience to its lowest possible technical solution and then building on it to improve the user experience. In the context of Jotter, that is a humble <textarea> element. That humble <textarea> is our minimum viable experience.

Let me show you how it’s built up, progressively real quick. If you disable CSS and JavaScript, you get this:

This result is great because I know that regardless of what happens, the user can do what they needed to do when the loaded Jotter in their browser: take some notes. That’s our minimum viable experience, completed with a few lines of code that work in every single browser—even very old browsers. Don’t you just love good ol’ HTML?

Now it’s time to enhance that minimum viable experience, progressively. It’s a good idea to do that in smaller steps rather than just provide a 0% experience or a 100% experience, which is the approach that’s often favoured by JavaScript framework enthusiasts. I think that process is counter-intuitive to the web, though, so building up from a minimum viable experience is the optimal way to go, in my opinion.

Understanding how a minimum viable experience works can be a bit tough, admittedly, so I like to use a the following diagram to explain the process:

Let me break down this diagram for both folks who can and can’t see it. On the top row, there’s four stages of a broken-up car, starting with just a wheel, all the way up to a fully functioning car. The car enhances only in a way that it is still mostly useless until it gets to its final form when the person is finally happy.

On the second row, instead of building a car, we start with a skateboard which immediately does the job of getting the person from point A to point B. This enhances to a Micro Scooter and then to a Push Bike. Its final form is a fancy looking Motor Scooter. I choose that instead of a car deliberately because generally, when you progressively enhance a project, it turns out to be way simpler and lighter than a project that was built without progressive enhancement in mind.

Now that we know what a minimum viable experience is and how it works, let’s apply this methodology to Jotter!

Add some CSS

The first enhancement is CSS. Jotter has a very simple design, which is mostly a full height <textarea> with a little sidebar. A flexbox-based, auto-stacking layout, inspired by a layout called The Sidebar is used and we’re good to go.

Based on the diagram from earlier, we can comfortably say we’re in Skateboard territory now.

Add some JavaScript

We’ve got styles now, so let’s enhance the experience again. A user can currently load up the site and take notes. If the CSS loads, it’ll be a more pleasant experience, but if they refresh their browser, they’re going to lose all of their work.

We can fix that by adding some local storage into the mix.

The functionality flow is pretty straightforward. As a user inputs content, the JavaScript listens to an input event and pushes the content of the <textarea> into localStorage. If we then set that localStorage data to populate the <textarea> on load, that user’s experience is suddenly enhanced because they can’t lose their work by accidentally refreshing.

The JavaScript is incredibly light, too:

const textArea = document.querySelector('textarea');
const storageKey = 'text';

const init = () => {

  textArea.value = localStorage.getItem(storageKey);

  textArea.addEventListener('input', () => {
    localStorage.setItem(storageKey, textArea.value);
  });
}

init();

In around 13 lines of code (which you can see a working demo here), we’ve been able to enhance the user’s experience considerably, and if we think back to our diagram from earlier, we are very much in Micro Scooter territory now.

Making it a PWA

We’re in really good shape now, so let’s turn Jotter into a Motor Scooter and make this thing work offline as an installable Progressive Web App (PWA).

Making a PWA is really achievable and Google have even produced a handy checklist to help you get going. You can also get guidance from a Lighthouse audit.

For this little app, all we need is a manifest and a Service Worker to cache assets and serve them offline for us if needed.

The Service Worker is actually pretty slim, so here it is in its entirety:

const VERSION = '0.1.3';
const CACHE_KEYS = {
  MAIN: `main-${VERSION}`
};

// URLS that we want to be cached when the worker is installed
const PRE_CACHE_URLS = ['/', '/css/global.css', '/js/app.js', '/js/components/content.js'];

/**
 * Takes an array of strings and puts them in a named cache store
 *
 * @param {String} cacheName
 * @param {Array} items=[]
 */
const addItemsToCache = function(cacheName, items = []) {
  caches.open(cacheName).then(cache => cache.addAll(items));
};

self.addEventListener('install', evt => {
  self.skipWaiting();

  addItemsToCache(CACHE_KEYS.MAIN, PRE_CACHE_URLS);
});

self.addEventListener('activate', evt => {
  // Look for any old caches that don't match our set and clear them out
  evt.waitUntil(
    caches
      .keys()
      .then(cacheNames => {
        return cacheNames.filter(item => !Object.values(CACHE_KEYS).includes(item));
      })
      .then(itemsToDelete => {
        return Promise.all(
          itemsToDelete.map(item => {
            return caches.delete(item);
          })
        );
      })
      .then(() => self.clients.claim())
  );
});

self.addEventListener('fetch', evt => {
  evt.respondWith(
    caches.match(evt.request).then(cachedResponse => {
      // Item found in cache so return
      if (cachedResponse) {
        return cachedResponse;
      }

      // Nothing found so load up the request from the network
      return caches.open(CACHE_KEYS.MAIN).then(cache => {
        return fetch(evt.request)
          .then(response => {
            // Put the new response in cache and return it
            return cache.put(evt.request, response.clone()).then(() => {
              return response;
            });
          })
          .catch(ex => {
            return;
          });
      });
    })
  );
});

What the Service Worker does here is pre-cache our core assets that we define in PRE_CACHE_URLS. Then, for each fetch event which is called per request, it’ll try to fulfil the request from cache first. If it can’t do that, it’ll load the remote request for us. With this setup, we achieve two things:

1. We get offline support because we stick our critical assets in cache immediately so they will be accessible offline
2. Once those critical assets and any other requested assets are cached, the app will run faster by default

Importantly now, because we have a manifest, some shortcut icons and a Service Worker that gives us offline support, we have a fully installable PWA!

Wrapping up

I hope with this simplified example you can see how approaching web design and development with a progressive enhancement approach, everyone gets an acceptable experience instead of those who are lucky enough to get every aspect of the page at the right time.

Jotter is very much live and in the process of being enhanced further, which you can see on its little in-app roadmap, so go ahead and play around with it.

Before you know it, it’ll be a car itself, but remember: it’ll always start as a humble little <textarea>.

About the author

Andy Bell is an independent designer and front-end developer who’s trying to make everyone’s experience on the web better with a focus on progressive enhancement and accessibility.

More articles by Andy

Andy Clarke digs deep into snow to find ways flat design can be brought back to life in CSS with the use of techniques to create a sense of depth. Like spring after an everlasting winter, perhaps it’s time to let a different style of design flourish. What a relief.

A reaction to overly ornamental designs, flat design has been the dominant aesthetic for almost a decade. As gradients, patterns, shadows, and three-dimensional skeuomorphism fell out of fashion, designers embraced solid colours, square corners, and sharp edges.

Anti-skeuomorphism no doubt helped designers focus on feature design and usability without the distraction of what some might still see as flourishes. But, reducing both product and website designs to a bare minimum has had unfortunate repercussions. With little to differentiate their designs, products and websites have adopted a regrettable uniformity which makes it difficult to distinguish between them.

Still, all fashions fade eventually. I’m hopeful that with the styling tools we have today, we’ll move beyond flatness and add an extra dimension. Here are five CSS properties which will bring depth and richness to your designs.

To illustrate how you might use them, I’ve made this design for the 1961 Austin Seven 850, the small car which helped define the swinging sixties.

Transparency with alpha values

The simplest way to add transparency to a background colour, border, or text element is using alpha values in your colour styles. These values have been available in combination with RGB (red, green, blue) for years. In RGBA, decimal values below 1 make any colour progressively more transparent. 0 is the most transparent, 1 is the most opaque:

body {
  color: rgba(255, 0, 153, .75); 
}

Alpha values also combine with HSL (hue, saturation, lightness) to form HSLA:

body {
  color: hsla(0, 0, 100, .75);
}

Currently a Working Draft, CSS Color Module Level 4 enables alpha values in RGB and HSL without the additional “A”:

body {
  color: rgb(255, 0, 153, .75);
  /* color: hsl(0, 0, 100, .75); */
}

This new module also introduces hexadecimal colours with alpha values. In this new value, the last two digits represent the transparency level, with FF producing 100% opacity and 00 resulting in 100% transparency. For the 75% opacity in my design, I add BF to my white hexadecimal colour:

body {
  color: #ffffffbf;
}

Although there’s already wide support for hexadecimal, HSL, and RGB with alpha values in most modern browsers, the current version of Microsoft Edge for Windows has lagged behind. This situation will no doubt change when Microsoft move Edge to Chromium.

2. Use opacity

Using the opacity property specifies the amount of opacity of any element (obviously) which allows elements below them in the stacking order to be all or partially visible. A value of 0 is most transparent, whereas 1 is most opaque.

This property is especially useful for tinting the colour of elements by allowing any colour behind them to bleed through. The British Motor Corporation logo in the footer of my design is solid white, but reducing its opacity allows it to take on the colour of the body element behind:

[src*="footer"] {
  opacity: .75; 
}

You might otherwise choose to use opacity values as part of a CSS filter. 0% opacity is fully transparent, while 100% is fully opaque and appears as if no filter has been applied. Applying a CSS filter is straightforward. First, declare the filter-function and then a value in parentheses:

[src*="footer"] {
  filter: opacity(75%); 
}

3. Start blending

Almost universally, contemporary browsers support the same compositing tools we’ve used in graphic design and photo editing software for years. Blend modes including luminosity, multiply, overlay, and screen can easily and quickly add depth to a design. There are two types of blend-mode.

background-blend-mode defines how background layers blend with the background colour behind them, and with each other. My layered design requires three background images applied to the body element:

body {
  padding: 2rem;
  background-color: #ba0e37;
  background-image:
    url(body-1.png),
    url(body-2.png),
    url(body-3.png);
  background-origin: content-box;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
}

You can apply different background-blend modes for each background image. Specify them in the same order as your background images and separate them with a comma:

body {
  background-blend-mode: multiply, soft-light, hard-light;
}

When I need to apply an alternative colour palette, there’s no need to export new background assets. I can achieve results simply by changing the background colour and these background-blend modes.

Sadly, there’s not yet support for blending modes in Edge, so provide an alternative background image for that browser:

@supports not (background-blend-mode: normal) {
  body {
    background-image: url(ihatetimvandamme.png); 
  }
}

mix-blend-mode, on the other hand, defines how an element’s content should blend with its ancestors.

To blend my Mini image with the background colours and images on the body, I add a value of hard-light, plus a filter which converts my full-colour picture to greyscale:

[src*="figure"] {
  filter: grayscale(100%);
  mix-blend-mode: hard-light; 
}

You can also use mix-blend-mode to add depth to text elements, like this headline and large footer paragraph in a green and yellow version of my design:

.theme-green h1,
.theme-green footer p:last-of-type {
  color: #f8Ef1c;
  mix-blend-mode: difference;
}

4. Overlap with CSS Grid

Whereas old-fashioned layout methods reinforced a rigid structure on website designs, CSS Grid opens up the possibility to layer elements without positioning or resorting to margin hacks. The HTML for my design is semantic and simple:

<body>

<p>You’ve never seen a car like it</p>

<h1><em>1961:</em> small car of the year</h1>

<figure>
  <img src="figure.png" alt="Austin Seven 850">
  <figcaption>
    <ul>
      <li>Austin Super Seven</li>
      <li>Morris Super Mini-Minor</li>
      <li>Austin Seven Cooper</li>
      <li>Morris Mini-Cooper</li>
    </ul>
  <figcaption>
</figure>

<footer>
  <p>Today’s car is a Mini</p>
  <p>Austin Seven 850</p>
  <img src="footer.png" alt="Austin Seven 850">
<footer>

</body>

I begin by applying a three-column symmetrical grid to the body element:

@media screen and (min-width : 48em) {

  body {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
  }

}

Then, I place my elements onto that grid using line numbers:

body > p {
  grid-column: 1 / -1; 
}

h1 {
  grid-column: 1 / 3; 
}

figure {
  grid-column: 1 / -1; 
}

footer {
  display: contents; 
}

footer div {
  grid-column: 1 / 3; 
}  

[src*="footer"] {
  grid-column: 3 / -1;
  align-self: end; 
}

As sub-grid has yet to see wide adoption, I apply a second grid to my figure element, so I may place my image and figcaption:

figure {
  display: grid;
  grid-template-columns: 1fr 3fr; 
}

figcaption {
  grid-column: 1; 
}

[src*="figure"] {
  grid-column: 2; 
}

Previewing the result in a browser shows me the energy associated with driving this little car is missing. To add movement to my design, I change the image’s grid-column values so it occupies the same space as my caption:

figcaption {
  grid-column: 1;
  grid-row: 3; 
}

[src*="figure"] {
  grid-column: 1 / -1; 
  grid-row: 3;
  padding-left: 5vw; 
}

5. Stack with z-index

In geometry, the x axis represents horizontal, the y axis represents vertical. In CSS, the z axis represents depth. Z-index values can be either negative or positive and the element with the highest value appears closest to a viewer, regardless of its position in the flow. If you give more than one element the same z-index value, the one which comes last in source order will appear on top.

It’s important to remember that z-index is only applied to elements which have their position property set to either relative or absolute. Without positioning, there is no stacking. However, z-index can be used on elements placed onto a grid.

As the previous figure image and figcaption occupy the same grid columns and row, I apply a higher z-index value to my caption to bring it closer to the viewer, despite it appearing before the picture in the flow of my content:

figcaption {
  grid-column: 1;
  grid-row: 3;
  z-index: 2; 
}

[src*="figure"] {
  grid-column: 1 / -1; 
  grid-row: 3;
  z-index: 1; 
}

Z’s not dead baby, Z’s not dead

While I’m not advocating a return to the worst excesses of skeuomorphism, I hope product and website designers will realise the value of a more vibrant approach to design; one which appreciates how design can distinguish a brand from its competition.

I’m incredibly grateful to Drew and his team of volunteers for inviting me to write for this incredible publication every year for the past fifteen years. As I closed my first article here on this day all those years ago, “Have a great holiday season!” Z’s still not dead baby, Z’s still not dead.

About the author

Andy Clarke is one of the world’s best-known website designers, consultant, speaker, and writer on art direction and design for products and websites. Andy founded Stuff & Nonsense in 1998 and for 20 years has helped companies big and small to improve their website and product designs. Andy’s the author of four web design books including ‘Transcending CSS,’ ‘Hardboiled Web Design’ and ‘Art Direction for the Web’. He really, really loves gorillas.

More articles by Andy

Rachel Andrew guides us through a tour of the last fifteen years in CSS layout, as manifested in articles here on 24 ways. From the days when Internet Explorer 6 was de rigueur, right up to the modern age of evergreen browsers, the only thing you can be sure of is that the web never stands still for long.

I’ve written nine articles in the 15 years of 24 ways, and all but one of those articles had something to do with CSS. In this last year of the project, I thought I would take a look back at those CSS articles. It’s been an interesting journey, and by reading through my words from the last 15 years I discovered not only how much the web platform has evolved - but how my own thinking has shifted with it.

2005: CSS layout starting points

Latest web browser versions: Internet Explorer 6 (at this point 4 years old), IE5.1 Mac, Netscape 8, Firefox 1.5, Safari 2

Fifteen years ago, my contributions to 24 ways started with a piece about CSS layout. That article explored something I had been using in my own work. In 2005, most of the work I was doing was building websites from Photoshop files delivered to me by my design agency clients. I’d built up a set of robust, tried-and-tested CSS layouts to use to implement these. My starting point when approaching any project was to take a look at the static comps and figure out which layout I would use:

• Liquid, multiple column with no footer
• Liquid, multiple column with footer
• Fixed width, centred

At that point, there were still many sites being shipped with table-based layouts. We had learned how to use floats to create columns some four years earlier, however layout was still a difficult and often fragile thing. By developing patterns that I knew worked, where I had figured out any strange bugs, I saved myself a lot of time.

Of course, I wasn’t the only person thinking in this way. The two sites from which the early CSS for layout enthusiasts took most of their inspiration, had a library of patterns for CSS layout. The Noodle Incident little boxes is still online, glish.com/css is sadly only available at the Internet Archive.

This thinking was taken to a much greater extreme in 2011, when Twitter Bootstrap launched and starting with an entire framework for layout and much more became commonplace across the industry. While I understand the concern many folk have about every website ending up looking the same, back in 2005 I was a pragmatist. That has not changed. I’ve always built websites and run businesses alongside evangelizing web standards and contributing to the platform. I’m all about getting the job done, paying the bills, balancing that with trying to make things better so we don’t need to make as many compromises in the future. If that means picking from one of a number of patterns, that is often a very reasonable approach. Not everything needs to be a creative outpouring.

Today however, CSS Grid Layout and Flexbox mean that we can take a much more fluid approach to developing layouts. This enables the practical and the creative alike. The need for layout starting points - whether simple like mine, or a full framework like Bootstrap - seems to be decreasing, however in their place comes an interest in component libraries. This approach to development partly enabled by the fact that new layout makes it possible to drop a component into the middle of a layout without blowing the whole thing up.

2006: Faster Development with CSS Constants

Latest web browser versions: Internet Explorer 7, Netscape 8.1, Firefox 2, Safari 2

My article in 2006 was once again taken from the work I was doing as a developer. I’ve always been as much, if not more of a backend developer than a frontend one. In 2006, I was working in PHP on custom CMS implementations. These would also usually include the front-end work. Along with several other people in the industry I’d been experimenting with ways to use CSS “constants” as we all seemed to call them, by processing the CSS with our server-side language of choice.

The use case was mostly for development, although as a CMS developer, I could see the potential of allowing these values to be updated via the CMS. Perhaps to allow a content editor to change a color scheme.

Also in 2006, the first version of Sass was released, created by Hampton Catlin and Natalie Weizenbaum. Sass, LESS and other pre-processors began to give us a more streamlined and elegant way to achieve variables in CSS.

In 2009, the need for pre-processors purely for variables is disappearing. CSS now has Custom Properties - something I did not foresee in 2006. These “CSS Variables” are far more powerful than swapping out a value in a build process. They can be changed dynamically, based on something changing in the environment, rather than being statically set at build time.

2009: Cleaner Code with CSS3 Selectors

Latest web browser versions: Internet Explorer 8, Firefox 3.5, Safari 4, Chrome 3

After a break from writing for 24 ways, in 2009 I wrote this piece about CSS3 Selectors, complete with jQuery fallbacks due to the fact that some of these selectors were not usable in Internet Explorer 8.

Today these useful selectors have wide browser support, we also have a large number of new selectors which are part of the Level 4 specification. The changes section of the Level 4 spec gives an excellent rundown of what has been added over the years. Browser support for these newer selectors is more inconsistent, MDN has an excellent list with the page for each selector detailing current browser support and usage examples.

2012: Giving Content Priority with CSS3 Grid Layout

Latest web browser versions: Internet Explorer 10, Firefox 17, Safari 6, Chrome 23

My 2012 piece was at the beginning of my interest in the CSS Grid Layout specification. Earlier in 2012 I had attended a workshop given by Bert Bos, in which he demonstrated some early stage CSS modules, including the CSS Grid Layout specification. I soon discovered that there would be an implementation of Grid in IE10, the new browser shipped in September of 2012 and I set about learning how to use Grid Layout. This article was based on what I had learned.

The problem of source versus visual order

As a CMS developer I immediately linked the ability to lay out items and prioritize content, to the CMS and content editors. I was keen to find ways to allow content editors to prioritize content across breakpoints, and I felt that Grid Layout might allow us to do that. As it turned out, we are still some way away from that goal. While Grid does allow us to separate visual display from source order, it can come at a cost. Non-visual browsers, and the tab order of the document follow the source and not the visual display. This makes it easy to create a disconnected and difficult to use experience if we essentially jumble up the display of elements, moving them away from how they appear in the document. I still think that an issue we need to solve is how to allow developers to indicate that the visual display should be considered the correct order rather than the document order.

The Grid Specification moved on

Some of the issues in this early version of the grid spec were apparent in my article. I needed to use a pre-processor, to calculate the columns an element would span. This was partly due to the fact that the early grid specifications did not have a concept of the gap property. In addition the initial spec did not include auto-placement and therefore each item had to be explicitly placed onto the grid. The basics of the final specification were there, however over the years that followed the specification was refined and developed. We got gaps, and auto-placement, and the grid-template-areas property was introduced. By the time Grid shipped in Firefox, Chrome, and Safari many of the sticky things I had encountered when writing this article were resolved.

2015: Grid, Flexbox, Box Alignment: Our New System for Layout

Latest web browser versions: Edge 13, Firefox 43, Safari 9, Chrome 47

Grid still hadn’t shipped in more browsers but the specification had moved on. We had support for gaps, with the grid-row-gap, grid-column-gap and grid-gap properties. My own thinking about the specification, and the related specifications had developed. I had started teaching grid not as a standalone module, but alongside Flexbox and Box Alignment. I was trying to demonstrate how these modules worked together to create a layout system for modern web development.

Another place my thinking had moved on since my initial Grid article in 2012, was in terms of content reordering and accessibility. In July of 2015 I wrote an article entitled, Modern CSS Layout, Power and Responsibility in which I outlined these concerns.

Some things change, and some stay the same. The grid- prefixed gap properties were ultimately moved into the Box Alignment specification in order that they could be defined for Flex layout and any other layout method which in future required gaps. What I did not expect, was that four years on I would still be being asked about Grid versus Flexbox:

“A question I keep being asked is whether CSS grid layout and flexbox are competing layout systems, as though it might be possible to back the loser in a CSS layout competition. The reality, however, is that these two methods will sit together as one system for doing layout on the web, each method playing to certain strengths and serving particular layout tasks.”

2016: What next for CSS Grid Layout?

Latest web browser versions: Edge 15, Firefox 50, Safari 10, Chrome 55

In 2016, we still didn’t have Grid in browsers, and I was increasingly looking like I was selling CSS vaporware. However, with the spec at Candidate Recommendation, and it looking likely that we would have grid in at least two browsers in the spring, I wrote an article about what might come next for grid.

The main subject was the subgrid feature, which had by that point been removed from the Level 1 specification. The CSS Working Group were still trying to decide whether a version of subgrid locked to both dimensions would be acceptable. In this version we would have declared display: subgrid on the grid item, after which its rows and columns would be locked to the tracks of the parent. I am very glad that it was ultimately decided to allow for one-dimensional subgrids. This means that you can use the column tracks of the parent, yet have an implicit grid for the rows. This enables patterns such as the one I described in A design pattern solved by subgrid. At the end of 2019, we don’t yet have wide browser support for subgrid, however Firefox has already shipped the value in Firefox 71. Hopefully other browsers will follow suit.

Level 2 of the grid specification ultimately became all about adding support for subgrid, and so we don’t yet have any of the other features I mentioned in that piece. All of those features are detailed in issues in the CSS Working Group Github repo, and aren’t forgotten about. As we come to decide features for Level 3, perhaps some of them will make the cut.

It was worth waiting for subgrid, as the one-dimensional version gives us so much more power, and as I take a look back over these 24 ways articles it really underlines how much of a long game contributing to the platform is. I mentioned in the closing paragraph of my 2016 article that you should not feel ignored if your idea or use case is not immediately discussed and added to a spec, and that is still the case. Those of us involved in specifying CSS, and in implementing CSS in browsers care very much about your feedback. We have to balance that with the need for this stuff to be right.

2017: Christmas Gifts for Your Future Self: Testing the Web Platform

Latest web browser versions: Edge 16, Firefox 57, Safari 11, Chrome 63

In 2017 I stepped away from directly talking about layout, and instead published an article about testing. Not about testing your own code, but about the Web Platform Tests project, and how contributing to the tests which help to ensure interoperability between browsers could benefit the platform - and you.

This article is still relevant today as it was two years ago. I’m often asked by people how they can get involved with CSS, and testing is a great place to start. Specifications need tests in order to progress to become Recommendations, therefore contributing tests can materially help the progress of a spec. You can also help to free up the time of spec editors, to make edits to their specs, by contributing tests they might otherwise need to work on.

The Web Platform Tests project has recently got new and improved documentation. If you have some time to spare and would like to help, take a look and see if you can identify some places that are in need of tests. You will learn a lot about the CSS specs you are testing while doing so, and you can feel that you are making a useful and much-needed contribution to the development of the web platform.

2018: Researching a Property in the CSS Specifications

Latest web browser versions: Edge 17, Firefox 64, Safari 12, Chrome 71

I almost stayed away from layout in my 2018 piece, however I did feature the Grid Layout property grid-auto-rows in this article. If you want to understand how to dig up all the details of a CSS property, then this article is still useful.

One thing that has changed since I began writing for 24 ways, is the amount of great information available to help you learn CSS. Whether you are someone who prefers to read like me, or a person who learns best from video, or by following along with a tutorial, it’s all out there for you. You don’t have to rely on understanding the specifications, though I would encourage everyone to become familiar with doing so, if just to be able to fact check a tutorial which seems to be doing something other than the resulting code.

2019: And that’s a wrap

Latest web browser versions: Edge 18, Firefox 71, Safari 12, Chrome 79

This year is the final countdown for 24 ways. With so many other publications creating great content, perhaps there is less of a need for an avalanche of writing in the closing days of each year. The archive will stay as a history of what was important, what we were thinking, and the problems of the day - many of which we have now solved in ways that the authors could never have imagined at the time. I can see through my articles how my thinking evolved over the years, and I’m as excited about what comes next as I was back in 2005, wondering how to make CSS layout easier.

About the author

Rachel Andrew is a Director of edgeofmyseat.com, a UK web development consultancy and creators of the small content management system, Perch; a W3C Invited Expert to the CSS Working Group; and Editor in Chief of Smashing Magazine. She is the author of a number of books including The New CSS Layout for A Book Apart and a Google Developer Expert for Web Technologies.

She curates a popular email newsletter on CSS Layout, and is passing on her layout knowledge over at her CSS Layout Workshop.

When not writing about business and technology on her blog at rachelandrew.co.uk or speaking at conferences, you will usually find Rachel running up and down one of the giant hills in Bristol, or attempting to land a small aeroplane while training for her Pilot’s license.

More articles by Rachel

Cambridge, Mass. : National Bureau of Economic Research, 2020

Cambridge, Mass. : National Bureau of Economic Research, 2020

New York : Springer, [2007]

Dewey Library - HX236.5.S6293 2020

Dewey Library - HV6431.J674 2019

Online Resource

Barker Library - UA23.H538 2019

Online Resource

Dewey Library - JC573.2.E852 B88 2020

Online Resource

Online Resource

Dewey Library - HV9950.C79 2019

Dewey Library - JC423.G74 2019

Dewey Library - JK1759.S87 2019