csslint
csslint copied to clipboard
CSSLint
Produce warning when [max-]height:0 is used with a CSS animation or transition
A warning should be generated when height:0 or max-height:0 is used to hide content with a CSS animation or transition.
If hiding content in this manner, the content may not be hidden to all users as intended, particularly to screen reader users.
The following patterns are considered warnings:
#myContainer {
max-height: 0;
transition: max-height 1s ease 0s;
}
@keyframes hide {
from {
max-height: 5em;
}
to {
max-height: 0;
}
}
Is the important part the use of max-height: 0? Or is the animation/transition? Or both?
On Thu, Mar 21, 2013 at 3:04 PM, WebOverhauls [email protected]:
A warning should be generated when height:0 or max-height:0 is used to hide content with a CSS animation or transition.
If hiding content in this manner, the content may not be hidden to all users as intended, particularly to screen reader users.
The following patterns are considered warnings:
#myContainer { max-height: 0; transition: max-height 1s ease 0s; }
@keyframes hide { from { max-height: 5em; } to { max-height: 0; } }
— Reply to this email directly or view it on GitHubhttps://github.com/stubbornella/csslint/issues/363 .
Nicholas C. Zakas @slicknet
Author, Professional JavaScript for Web Developers Buy it at Amazon.com: http://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691/ref=sr_1_3
The culprit is really max-height: 0. A rule could be made to produce a warning when used in any case, and recommend that if hiding content from all users to use display:none.
How about max-width: 0? Seems like that would be the same?
On Fri, Mar 22, 2013 at 3:34 PM, WebOverhauls [email protected]:
The culprit is really max-height: 0. A rule could be made to produce a warning when used in any case, and recommend that if hiding content from all users to use display:none.
— Reply to this email directly or view it on GitHubhttps://github.com/stubbornella/csslint/issues/363#issuecomment-15324830 .
Nicholas C. Zakas @slicknet
Author, Professional JavaScript for Web Developers Buy it at Amazon.com: http://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691/ref=sr_1_3
It does seem like most uses of height: 0 would cause accessibility issues, but what about something like this?
#foo {
height: 0;
transition: all .5s ease 0s;
visibility: hidden;
}
#foo:target {
height: 400px;
visibility: visible;
}
In this case, the height: 0 is used for the transition between visibility: hidden and visibility: visible. Something like that seems legit to me.
It's pretty easy to say if visibility is set to hidden or display is set to none that this warning would be invalid.
On Sun, Mar 24, 2013 at 12:58 AM, Michael Mattiacci < [email protected]> wrote:
It does seem like most uses of height: 0 would cause accessibility issues, but what about something like this?
#foo { height: 0; transition: all .5s ease 0s; visibility: hidden;}#foo:target { height: 400px; visibility: visible;}
In this case, the height: 0 is used for the transition between visibility: hidden and visibility: visible. Something like that seems legit to me.
— Reply to this email directly or view it on GitHubhttps://github.com/stubbornella/csslint/issues/363#issuecomment-15352908 .
Nicholas C. Zakas @slicknet
Author, Professional JavaScript for Web Developers Buy it at Amazon.com: http://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691/ref=sr_1_3
Mattiacci: thanks for the idea on visibility.
Display:none is not a solution as it removes the animation/transition effect when hiding.
Visibility hidden/visible is a viable solution with one nuance: on page load, the closing animation is displayed on screen. One way to solve is to, on page load, add style=height 0 with JS then remove when first "show" behavior occurs.
Nzakas: This is a bit tricky, so you may want to still include this rule as a warning. If not, that's cool.
I'm just trying to get us down to a reduced case that won't result in a lot of false positives. So I would venture:
- If max-height or max-width is 0 without anything else, produce a warning.
- If max-height or max-width is 0 but there is also visibility: hidden or display: none, then don't warn because the element is truly hidden.
Any other parts to this?
On Mon, Mar 25, 2013 at 11:47 AM, WebOverhauls [email protected]:
Mattiacci: thanks for the idea on visibility.
Display:none is not a solution as it removes the animation/transition effect when hiding.
Visibility hidden/visible is a viable solution with one nuance: on page load, the closing animation is displayed on screen. One way to solve is to, on page load, add style=height 0 with JS then remove when first "show" behavior occurs.
Nzakas: This is a bit tricky, so you may want to still include this rule as a warning. If not, that's cool.
— Reply to this email directly or view it on GitHubhttps://github.com/stubbornella/csslint/issues/363#issuecomment-15413586 .
Nicholas C. Zakas @slicknet
Author, Professional JavaScript for Web Developers Buy it at Amazon.com: http://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691/ref=sr_1_3
