@@ -908,174 +908,6 @@ select::picker-icon {
908
908
block-start span-inline-start;
909
909
}
910
910
```
911
- <h2 class="no-num non-normative" id="explorations">Appendix B: Explorations</h2>
912
-
913
- ## Basic Styling Proposals ## {#ideas}
914
-
915
- This section sketches a few proposals for solving the form styling problem.
916
-
917
- ### Prototypes ### {#prototypes}
918
-
919
- This idea, originally suggested by fantasai,
920
- is that we can style a handful of "prototype" elements.
921
- Browser UI designers can then take the styling of those elements
922
- and extrapolate the design into their own UIs.
923
- At minimum, things like text, backgrounds, and borders can be used.
924
- At the limit, things like internal padding, border-radius, etc might be used.
925
-
926
- <pre class='lang-css'>
927
- @control button {
928
- <declaration-list>
929
- }
930
-
931
- @control input {
932
- <declaration-list>
933
- }
934
-
935
- input::selection {
936
- <declaration-list>
937
- }
938
-
939
- ...
940
- </pre>
941
-
942
- <blockquote cite="https://lists.w3.org/Archives/Public/www-style/2015Jan/0490.html">
943
- You would be able to use styles for:
944
-
945
- * font selection (css-fonts)
946
- * text decoration (css-text-decor)
947
- * text layout (css-text)
948
- * backgrounds & drop-shadow (css-backgrounds)
949
- * borders & padding (css-backgrounds)
950
- * filters
951
- * anything else we or a UA decides seems relevant
952
-
953
- Most form controls, even a calendar widget or clock, are a combination of
954
- these three primitives in some way. If the UA is given the styling for
955
- these three primitives, and perhaps one or two more it can figure out how
956
- to style the rest.
957
-
958
- For example, a calendar widget might have the month, the year, some buttons
959
- to move them around, the ability to click into them and edit them directly,
960
- and a representation of the days of the month. The selected day is selected.
961
- Perhaps the buttons only show up on :hover or :focus -- the UA decides. But
962
- it knows that a button should be this particular shade of blue with that
963
- particular border-radius and drop-shadow. The calendar might be shown in the
964
- colors of the input field, and the selected day in the selection color, and
965
- in all ways it will match the way the input fields look in the rest of the
966
- page.
967
-
968
- Now, the author can't decide, for example, the spacing between the year
969
- and the month name, or whether the button to change years has a solid
970
- arrow or a hollow arrow or a frilly one, and she can't decide that there
971
- should be a black solid half-border between the month and the day field
972
- below it with 5px spacing. But the calendar will look like it belongs to
973
- the page, and the UA can come up with a different calendar layout when it
974
- ships one on a wide but short smart watch where the month and year are
975
- better placed on the side without breaking anything.
976
- </blockquote>
977
-
978
- <div class='example'>
979
- <img src=images/time01.png alt="iOS time picker">
980
-
981
- <blockquote cite="https://lists.w3.org/Archives/Public/www-style/2015Jan/0622.html">
982
- The black area is the button color; a very light transparency of it
983
- can be the glass color. The rollers are the input colors.
984
- </blockquote>
985
- </div>
986
-
987
- <div class='example'>
988
- <img src=images/time02.png alt="Android time picker">
989
-
990
- <blockquote cite="https://lists.w3.org/Archives/Public/www-style/2015Jan/0622.html">
991
- It's hard to tell without more context, but for the one on the right,
992
- the clock face and the digital readout are @input colors, the highlighted
993
- bits are the highlight color, the Done button is the button styling,
994
- and the shaded area around the clock face is the same color as the
995
- button background.
996
- </blockquote>
997
- </div>
998
-
999
-
1000
- ### Inverse System Colors ### {#inverse-system}
1001
-
1002
- This idea, originally sketched by Florian and Tab,
1003
- is to define an abstract set of colors
1004
- that UI designers can then choose from when coloring their UI.
1005
-
1006
- Tab's suggested set of colors, from an Android color-extraction API proposal:
1007
-
1008
- * Light/Normal/Dark Vibrant
1009
- * Light/Normal/Dark Muted
1010
- * Vibrant Complementary (for call-out buttons and such that need to be visually distinct)
1011
-
1012
- (where light ~75% lightness, normal is ~50%, dark is ~25%; vibrant is
1013
- at least 30% saturation, ideally 100%, and muted is at most 40%
1014
- saturation, ideally 30%)
1015
-
1016
- * Light/Dark Contrasting Text
1017
- * Light/Dark Contrasting Secondary Text
1018
-
1019
- That's 11 colors, many of which should be drawable from the webpage's own color scheme.
1020
- We can auto-gen a bunch of them if you specify at least some of them,
1021
- like genning the light/dark variants from the "normal-vibrant" color,
1022
- or automatically setting text colors to white/black as appropriate.
1023
-
1024
- There's no guarantee that the input UIs will use the colors in the *same way* that the rest of the page does, though.
1025
-
1026
- ## Miscellaneous Control-Specific Suggestions ## {#misc}
1027
-
1028
- Issue: <a href="http://blog.teamtreehouse.com/use-meter-progress-elements"><progress> and <meter> styling</a>
1029
-
1030
- Issue: Insert <select> and <datalist> styling proposal and/or whiteboard photo.
1031
-
1032
- ### Select/Datalist Dropdown ### {#select-dropdown}
1033
-
1034
- 1. Only allow styling if both 'color!!property' and 'background' are set.
1035
- 2. Option container:
1036
- * backgrounds
1037
- * borders
1038
- * padding
1039
- 3. <{option}>
1040
- * padding
1041
- * borders
1042
- * border-collapse?
1043
- * backgrounds
1044
- * display-inside is allowed, automatically blockified
1045
- * not margins, position, float, width, height
1046
-
1047
- All options are contain:paint and BFCs.
1048
-
1049
-
1050
- ## Input UI Examples ## {#ui-examples}
1051
-
1052
-
1053
- This section catalogues as many input UI examples as we can screenshot,
1054
- especially on mobile devices where they're a bit "weirder".
1055
-
1056
- ### Time Pickers ### {#time-examples}
1057
-
1058
- <figure>
1059
- <img src="images/time01.png" alt="">
1060
- <figcaption>iOS time picker</figcaption>
1061
- </figure>
1062
-
1063
- <figure>
1064
- <img src="images/time02.png" alt="">
1065
- <figcaption>Android time picker 1</figcaption>
1066
- </figure>
1067
-
1068
- <figure>
1069
- <img src="images/time03.png" alt="">
1070
- <figcaption>Android time picker 2</figcaption>
1071
- </figure>
1072
-
1073
- ### Date Pickers ### {#date-examples}
1074
-
1075
- <figure>
1076
- <img src="images/date01.png" alt="">
1077
- <figcaption>Android date picker</figcaption>
1078
- </figure>
1079
911
1080
912
<h2 class=no-num id=changes>Changes</h2>
1081
913
@@ -1084,7 +916,8 @@ especially on mobile devices where they're a bit "weirder".
1084
916
Public Working Draft</a> of 25 March 2025</h3>
1085
917
1086
918
<ul>
1087
- <li>Added !important to select buttons inertness</li>
919
+ <li>Added !important to select buttons inertness.</li>
920
+ <li>Removed "Appendix B: Explorations" with obsolete ideas.</li>
1088
921
</ul>
1089
922
1090
923
<h2 class=no-num id=privacy>Privacy Considerations</h2>
0 commit comments