ACTION-50: Prepare a list of user context properties that might be able to be covered by media queries
Prepare a list of user context properties that might be able to be covered by media queries
- State:
- closed
- Person:
- James Craig
- Due on:
- April 17, 2013
- Created on:
- April 10, 2013
- Associated Product:
- IndieUI: User Context 1.0
- Related emails:
- Re: Draft of proposed CSS Media Features (Was: ACTION-50: Prepare a list of user context properties that might be able to be covered by media queries (Independent User Interface Task Force) (from jcraig@apple.com on 2013-09-27)
- IndieUI Teleconference Agenda; 15 May at 21:00Z for 60 minutes (from janina@rednote.net on 2013-05-13)
- Draft of proposed CSS Media Features (Was: ACTION-50: Prepare a list of user context properties that might be able to be covered by media queries (Independent User Interface Task Force) (from jcraig@apple.com on 2013-04-10)
Related notes:
Relating to the Microsoft proposals previously mentioned by PFWG to the CSSWG.
-ms-high-contrast: active | black-on-white | white-on-black | none;
http://msdn.microsoft.com/en-us/library/windows/apps/hh465764.aspx
-ms-high-contrast-adjust: auto | none;
http://msdn.microsoft.com/en-us/library/windows/apps/hh441137.aspx
/* colors/display */
display-colors-inverted: inverted | off;
display-contrast: <percentage>;
/* type and font defaults */
minimum-font-size: <size>;
base-font-size: <size>;
base-letter-spacing: <number>; /* unitless multiplier of current em value? */
base-word-spacing: <number>; /* unitless multiplier of current em value? */
base-line-height: <number>; /* unitless multiplier of current em value? */
/* adjusting to cover both the Microsoft proposal as well as other platforms that have a slider value */
display-increase-contrast: 100%; may be equivalent to -ms-high-contrast: active;
display-increase-contrast: 0%; may be equivalent to -ms-high-contrast: none;
So we'd need to also add the displayLightOnDark property from IndieUI to cover the other values. Possibly:
display-color-scheme-setting: light-on-dark | dark-on-light;
Or perhaps this, which allows more variants:
base-color: <color>;
base-background-color: <color>;
Moving to email thread for continued discussion (see link above). Here's the last I posted.
Here's the list of media features we could propose to the CSSWG. Captions/subtitles might be another, but I'm not sure it fits into media queries quite as cleanly as these.
base-color
base-background-color
base-font-size
base-letter-spacing
base-line-height
base-word-spacing
display-colors-inverted
display-contrast-increased
minimum-font-size
EXAMPLE:
In this example, the hardware display rendering is inverted, so the web app could double-invert foreground image and video content, which usually looks strange while inverted. This would leave text foreground color, all background colors, and background styles inverted to adhere to user setting.
@media (display-colors-inverted: inverted) {
img, video {
filter: invert(100%);
}
}
RELATION TO MICROSOFT PROPOSAL:
/* adjusting to cover both the Microsoft proposal as well as other platforms that have a slider value for color variants */
-ms-high-contrast: active; would be equivalent to:
display-contrast-increased: 100%;
-ms-high-contrast: black-on-white; would be equivalent to:
display-contrast-increased: 100%;
base-color: black;
base-background-color: white;
-ms-high-contrast: white-on-black; would be equivalent to:
display-contrast-increased: 100%;
base-color: white;
base-background-color: black;
-ms-high-contrast: none; would be equivalent to the default value:
display-contrast-increased: 0%;
This is more or less done. Closing.
James Craig, 21 Mar 2014, 20:12:42Display change log.