search

jquery-archive / css-chassis

An attempt at creating an open standard for both CSS and JavaScript UI libraries.
https://css-chassis.com
Other
351 stars 67 forks source link

Active State Styling - Consistent Outline Style #141

Open sfrisk opened 8 years ago

sfrisk commented 8 years ago

Given that browsers handle CSS Outlines differently, we should come up with a universal style for "active" states (for buttons, anchors, inputs), that doesn't remove the CSS Outline (because that would be bad and go against what we're trying to here), but at least makes it consistent visually across browsers.

sfrisk commented 8 years ago

See: http://a11yproject.com/posts/never-remove-css-outlines/

thejdeep commented 8 years ago

:+1: How about applying an outline:none on the elements in active state and applying appropriate CSS to make them look like below on all browsers Active Button

sfrisk commented 8 years ago

I think we should try to style the outline element before going with outline:none.

thejdeep commented 8 years ago

Point of debate being : Visually consistent across browsers v/s across websites Ref : https://www.tjvantoll.com/2013/01/28/stop-messing-with-the-browsers-default-focus-outline/

rawteech commented 8 years ago

@sfrisk Thats a thoughtful Idea. Now, how about coming up with the universal active state,as you said, then give browsers an option of turning 'on' or 'off' these CSS outline styles, keeping the 'on' state as the default.

rawteech commented 8 years ago

@thejdeep That will be like forcing all browsers to have styled elements. It looks cool though :sunglasses:

nashvail commented 7 years ago

See: http://a11yproject.com/posts/never-remove-css-outlines/

@sfrisk http://a11yproject.com/posts/never-remove-css-outlines/ seems to be dead http://www.outlinenone.com/ probably makes the same point

nashvail commented 7 years ago

Seems like to create a universal style for the active state styling of inputs styling box-shadow is the way to go while also setting outline:none.

Firstly there is no predefined blurred/hazy style for outlines, I tried recreating the effect using multiple outlines with incrementally increasing thickness and decreasing opacity but turns out multiple outlines on same element is not possible.

Moreover our buttons and inputs have non zero border-radius and it is not possible to to add radius to outlines in CSS, adding custom outline therefore results in a triangular gap at all the four corners.

Therefore the best way I think to go around having blurred outlines for active/focus states is through box-shadow.

I also don't think we are in the process violating any a11y guidelines as we are providing alternative styling and not removing anything that will result in a11y getting harmed.

Thoughts?

sfrisk commented 7 years ago

My reason for being concerned about the light box shadow to indicate focus, is that a lot of the stylings is within variables, and if someone ops for a 'flat' button design, we lose that focus appearance. Also I'm not sure if our box-shadow counts as "high visibility" as a clear indicator of 'focus' state as mentioned in http://www.outlinenone.com/

Also ping @arschmitz for input.