]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commit
Update element-invisible mixin 9864/head
authorGaël Poupard <ffoodd@users.noreply.github.com>
Fri, 10 Mar 2017 15:57:38 +0000 (16:57 +0100)
committerGitHub <noreply@github.com>
Fri, 10 Mar 2017 15:57:38 +0000 (16:57 +0100)
commit14eb85cf3eb59a7cd91d1c25ded57aac5f903ef1
treec5c41c479245623442506a1132a8b8f874d5c45b
parent7507694312fd4939ea7186b5253ff76947f5d164
Update element-invisible mixin

Trying to make it bulletproof. I also linked [a detailed post on Hugo Giraudel's blog](http://hugogiraudel.com/2016/10/13/css-hide-and-seek/), but to sum it up:
* improve the reset part with `border` and  `padding`;
* add `clip-path` as a progressive enhancement for [deprecated `clip` property](https://www.w3.org/TR/css-masking-1/#clip-property) with @ryuran's [shortest notation](https://twitter.com/ryuran78/status/778943389819604992);
* use `white-space` to prevent vocalization inconsistency on some screen readers: see [J. Renée Beach's post](https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe#.vcd5xlpgg) about this.

You'll find [my test case on codepen](http://codepen.io/ffoodd/pen/gwKZyq?editors=1100#). Hope it'll help — and let me know if there is any issue with this :)
scss/util/_mixins.scss