From bc7a5db90d29e03db169c5dd264ac85bd8aa10f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= <ffoodd@users.noreply.github.com>
Date: Fri, 10 Mar 2017 15:43:20 +0100
Subject: [PATCH] clip is deprecated: add clip-path as PE

`clip` [is deprecated since 2014](https://www.w3.org/TR/css-masking-1/#clip-property). It works great but already has a more future proof version: `clip-path`.

@ryuran [suggested](https://twitter.com/ryuran78/status/778943389819604992) the `clip:path: inset(50%);` notation as it's the shorter possible to mimic our old clip.

Here's [a codepen](http://codepen.io/ffoodd/pen/gwKZyq?editors=1100#) and [a post translated by Hugo Giraudel](http://hugogiraudel.com/2016/10/13/css-hide-and-seek/).

Hope it'll help :)
---
 src/css/main.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/css/main.css b/src/css/main.css
index b4d6e686a7..ceb1568b2c 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -128,6 +128,7 @@ textarea {
 .visuallyhidden {
     border: 0;
     clip: rect(0 0 0 0);
+    clip-path: inset(50%);
     height: 1px;
     margin: -1px;
     overflow: hidden;
@@ -146,6 +147,7 @@ textarea {
 .visuallyhidden.focusable:active,
 .visuallyhidden.focusable:focus {
     clip: auto;
+    clip-path: none;
     height: auto;
     margin: 0;
     overflow: visible;